Python程式語言獎封冠後持續被看好!!還不學起來!!

Python程式語言獎封冠後持續被看好!!還不學起來!!
Python程式語言獎封冠後持續被看好!!還不學起來!!

 

燒了好久的Python在程式語言獎持續有優異的表現~且未來前景光明!!想踏入這領域的你就別再猶豫啦!!

Python 兩度獲獎,2021 封冠後未來看好

Python 在 2021 年度表現亮眼,不僅連續兩年(2020、2021)獲得 TIOBE 年度程式語言獎,更從 2021 年初的 TIOBE Index 第三名,同年 8 月首度超越 Java 晉升亞軍,在同年 10 月攀升至第一名後,即穩居冠軍寶座至今。

TIOBE 是程式語言的討論社群,TIOBE Index 則是程式語言的流行指數。該指數在基於全球工程師、課程使用量及第三方供應商的數據,每月更新一次;另外在 Google、Yahoo、維基百科等主流搜尋引擎的搜尋量則用來計算分數。值得一提的是,TIOBE Index 的排名並非要評斷何為「最完美的程式語言」,而是用來檢視自己所學習的程式語言是否為最新、最泛用的語言,也有助於在建構新的軟體系統之前如何選擇程式語言的關鍵決策。

而 TIOBE 年度程式語言獎是頒發給在一年之中,評分成長最多的程式語言,本次 C# 本有望冠軍,卻在 12 月時被 Python 反超而遺憾落馬。

官方表示,目前 Python 的評分比第二名 C 更高了 1% 以上,雖然與 2001 年的 Java 巔峰相比還有一段距離,但由於 Python 已經成為許多領域的標準程式語言,官方相信未來仍有持續成長的空間。

無處不在的程式語言!Python 連續兩年霸榜的秘密

除了奪得 2021 年度的雙冠王,Python 此前在 2007 年、2010 年、2018 年、2020 年都曾獲得 TIOBE 年度程式語言獎的稱號,是奪得該獎項最多次的程式語言。

由此可見,Python 在程式語言界確實如 TIOBE 官方評價般「無處不在」。Python 不僅在數據科學、機器學習等領域大受歡迎,同時也適用於 Web 開發、後端、移動應用程式開發,甚或是(較大的)嵌入式系統等領域。
整體而言,Python 之所以被大規模地採用,主要歸功於其簡單上手的便利性及可以大幅提升生產效益的成長性。除此之外,Python 這兩年的異軍突起,並持續蟬聯冠軍的可能原因還有:擁有最多 AI 人工智慧函式庫、高平台獨立性、高靈活度、良好可讀性及視覺化選項等優點(相關文章:IBM背書!入行AI人工智慧必學Python的8大理由),無怪乎成為程式語言社群中最受歡迎的程式語言!

更多程式語言或人工智慧相關文章請點閱下方連結

其他閱讀

使用 JavaPython 22 種語言寫出「Hello World」會如何?

用說的就能寫程式!人工智慧替手傷工程師開發語音程式工具

Nature:語言天才比數學高手更適合學 Python!別在嘴文科生、女性不能寫程式了

第一次上程式設計課程Python還是Java?差在別?

以色列就是靠這款人工智慧裝置大大提升戰鬥力?!()

只要動動嘴~寫程式最枯燥乏味的地方由人工智慧幫你完成!()

UI,UX設計師非收不可的年度12個超狂網頁設計工具!!(1)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(下)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(下)

現今隨處可見的UI 設計隱藏在生活各個角落~你有發現哪種設計最受歡迎嗎?相同的概念在哆啦A夢裡也能發現喔~(下)

本篇為下篇,上篇請點大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(上)

不只是「好看」 圓角設計的背後深意

近年 3C 產品硬體設計上都大量使用圓角,UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」,圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等,需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後,到底是什麼原因?

人們為何會熱愛圓角的科學根據尚未定論,大致有以下三種說法:

1. 認知負荷論(cognitive load theory)

認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶,容量十分有限,一次只能記下 5~9 條簡單的訊息。

著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」是最快速的,而處理多稜角的形狀則較吃力,速度也較慢。

結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦更願意接納圓潤的圓角矩型。

2. 視覺動線論

視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。

人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。

而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,而不會感到突兀與刺眼。

3. 曲線偏坦論(Contour Bias)

以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。

除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。

所以,人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。

圓角不是萬靈丹 善用不濫用才是好的 UI

我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。

在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。

UI師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養。

更多UI,UX或程式設計相關文章請點閱下方連結

其他閱讀

改變 UI 竟能增進友情、UX 讓麵包烤更香?Netflix 紀錄片揭露設計師巧思

2021年最好用的12UI/UX設計工具,網頁設計都該試試看

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

以色列就是靠這款人工智慧裝置大大提升戰鬥力?!()

只要動動嘴~寫程式最枯燥乏味的地方由人工智慧幫你完成!()

UI,UX設計師非收不可的年度12個超狂網頁設計工具!!(1)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(上)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(上)

 

現今隨處可見的UI 設計隱藏在生活各個角落~你有發現哪種設計最受歡迎嗎?相同的概念在哆啦A夢裡也能發現喔~(上)

「圓角矩形」是近年盡人皆知的 UI 設計優勢,自 iPhone 4 發售至今日,到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。

然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢?箇中緣由,其實也藏在哆啦 A 夢身上!

「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示,任何圖形設計元素如形狀、線條、顏色、紋理和圖案,都能淺移默化地影響人們的感官認知,從而讓平面圖形附上不同的喻意。

乍聽之下有點形而上學,但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色,也都被賦予了「幾何暗示」!

三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示

陪伴許多人長大的國民作品《哆啦 A 夢》(ドラえもん),其中的主要角色個個形象鮮明、深入人心,是運用幾何圖形設計角色的好範例:

自戀愛現、在狡猾的同時又常有鬼點子的小夫,從是身形、嘴形到髮型都呈現三角形;而個性粗暴、蠻不講理,但在緊要關頭時又展現了正直的胖虎,無論臉型與身體都呈現寬大的方型。

至於個性善良溫柔、富有同情心的靜香,臉型與整題造型都較圓潤,沒有稜角;至於最備受喜愛的哆啦 A 夢,整個角色從頭到手都是圓型設計。

不只日本,歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底,藉此創造出引人入勝、個性鮮明的角色,足見一個好的幾何設計所具有的優勢。

以下影片為藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象:

卡通之外 賈伯斯也瘋狂的圓角設計

不只卡通動漫畫之外,許多商業產品也為了讓客戶留下良好的第一印象,採用親民的圓角設計。

話說從頭,要談圓角矩型,就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為:所有物件都有圓角,而且相較於圓形與橢圓形,圓角矩形設計在生活中其實更為常見。

如以下影片所示,2020 年發售的 iPhone SE 依然保留標誌性的圓角設計:

1981 年,Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁:「圓角的矩形很難用電腦技術畫出來,而且又不必要!」

Steve Jobs 二話不說便把 Bill 從座位上拉起來,指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街,指出大街小巷每個小角落的圓角矩形給他看:「你看,到處都有圓角矩形!」

最後,在一個「禁止停車」的圓角矩形路標牌被指出來後,Bill 認輸了。「好啦,我放棄。我回去看看是不是真的跟我想像的一樣困難。」

隔天下午,Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡,這個幾何圖形已經成為其 UI 介面傳承的一部分。

本篇為上篇,下篇請點大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(下)

更多UI,UX或程式設計相關文章請點閱下方連結

其他閱讀

改變 UI 竟能增進友情、UX 讓麵包烤更香?Netflix 紀錄片揭露設計師巧思

2021年最好用的12UI/UX設計工具,網頁設計都該試試看

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

以色列就是靠這款人工智慧裝置大大提升戰鬥力?!()

只要動動嘴~寫程式最枯燥乏味的地方由人工智慧幫你完成!()

UI,UX設計師非收不可的年度12個超狂網頁設計工具!!(1)

2021最好用的12個UI,UX設計工具~通通收起來!!(4)

2021最好用的12個UI,UX設計工具~通通收起來!!(4)
2021最好用的12個UI,UX設計工具~通通收起來!!(4)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(4)

本篇為系列文章,上篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(3)

Origami Studio 打造出 FB 與 IG 的UIUX設計

臉書(Facebook)用來打造Instagram的原型UI/UX設計工具。即使不會寫程式的設計師也能快速建立App原型(Prototype),還可匯出原始碼給工程師使用,拉近設計師與工程師溝通的距離。臉書(Facebooke)旗下許多使用者介面是Origami Studio設計和建立而成,例如,Instagram、通訊軟體Messenger、社團功能Groups等。

臉書(Facebooke)在 2013 年推出了這個原型製作工具。起初建立在蘋果圖形視覺化應用程式Quartz Composer上的工具,是原生OS X的應用程式,但 Xcode 環境的那部分並不是最好的原型製作選擇。所以臉書(Facebooke)去年推出了 Origami Studio。

Marvel:產出APP的設計圖

設計者不需會寫程式便能製作「會動」的app,這裡的會動指的是能夠像真正的app那樣操作,但只能呈現靜態的畫面,也無法在手機中真正運行,不過最大好處就是只要有設計圖,就能快速產生初版的Prototype,不需寫出真正的App就讓使用者體驗到UI/UX設計,如果想要修改畫面也能快速修改完成。

Justinmind 節省UI/UX設計的時間

快速一體化的原型UI/UX設計可讓設計人員專注於用戶體驗。很容易與最廣泛使用的設計平台結合,包括Sketch和Photoshop,可從這些平台中、瀏覽器或檔案系統中來新增內容和影像,甚至可使用Justinmind建立自己的UI圖庫,並提供全套模板來創建高擬真原型。

上述任何一個設計平台,都很適合目前的UI/UX設計師,與其花時間思考使用哪一個平台時,仍還是需要思考問題的本質,「心態」是最重要的一部分,有健康的心,在面對挑戰時試著使用適合的工具找方法解決,讓這些平台為整個團隊工作,自己在使用上愈駕輕就熟,就愈有時間與團隊和諧地進行網站創建工作。

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則,優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!()

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!()

2021最好用的12個UI,UX設計工具~通通收起來!!(3)

2021最好用的12個UI,UX設計工具~通通收起來!!(3)
2021最好用的12個UI,UX設計工具~通通收起來!!(3)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(3)

本篇為系列文章,上篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(2)

Mockplus:跨部門神器,讓不同團隊的人都看的懂!

簡潔易用並專注於原型設計的UI/UX設計軟體,非常適合跨團隊協作。可幫助專案企劃有效的溝通網頁功能、軟體介面、App 互動,透過畫出原型,讓產品經理、設計師、程式開發、主管、客戶之間能夠了解產品本身的使用流程,把想像或文字化為具體可用的示範。

Mockplus支援不同平台 AxureSketchAdobe PhotoshopFigma and Adobe XD匯入原型設計。同時支援電腦版Windows和Mac的桌面應用程式及行動裝置系統iOS和Android應用程式,所有項目同步到 Mock PlusCloud,快速的組合中就能產生可以互動操作的原型圖。

Claritee:不會設計仍可從零上手

一款智慧型線框圖UI/UX設計工具,可將想法轉換為可視線框圖,是產品開發的關鍵一步,因為它提供一種低成本的可視化方法,無論設計者僅完成單個頁面還是整個網站,都可自動查看互動式原型。團隊可確認投入時間和資源創建過程中,能在原型設計呈現前解決問題。

InVision:讓團隊不失去方向,保持工作進度

在繁雜的團隊工作中,日復一日,總容易迷失與工作效率低落,藉由這一款強化團隊溝通互動的原型UI/UX設計平台,簡化工作流程、掌握整體專案進度,縮短工作的流程與溝通。InVision提供從線框圖轉換到UI設計所需的所有元素,輕鬆實現團隊合作的呈現和原型設計。同時支持即時設計修改和收集團隊的快速反饋,設計師通常也會用來管理自己的工作流程。

Axure RP:我很醜,可是我有脈絡

有別於Sketch介面的美觀,Axure更專注在使用者互動上,兩者各有特點,但剛開始學習UI/UX設計容易過於注重表面的視覺呈現 (Visual Design) 而非核心的使用者需求 (User Needs)。Axure 的簡陋反而讓使用者能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上,快速繪製低擬真 (low-fidelity) 的 Wireframe,同時也可以做到中高擬真 (mid- to high-fidelity) 的互動原型 (Prototype)。

Axure RP將 SVG 導入、Sketch 和Adob​​e XD集成與原型製作功能相結合。可輕鬆的將Adob​​e XD和Draw共享Axure RP原型和畫板,並在螢幕頂部收集輸入。可檢查佈局介面、獲取CSS片段和下載,同時將靜態圖像轉換為動態Axure Cloud原型。Axure RP還增加綜合文檔、自動化紅線和更完整的移交給開發人員,無需程式語言。

本篇為系列文章,下篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(4)

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則,優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!()

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!()

2021最好用的12個UI,UX設計工具~通通收起來!!(2)

2021最好用的12個UI,UX設計工具~通通收起來!!(2)
2021最好用的12個UI,UX設計工具~通通收起來!!(2)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(2)

本篇為系列文章,上篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(1)

Figma:超人氣線上UI/UX設計

在和團隊討論進行時,腦袋靈光一現便可立即記錄下來的線上工具,擁有自由拖曳的編輯器、框線創建,輕輕鬆鬆就將溝通內容即時落實在高擬真度的原型設計中!不僅如此,內建的動畫素材增添身歷其境的呈現效果。

Figma 從推出至今,愈來愈受到UI/UX設計師的青睞。這一款基於瀏覽器的協作式設計工具雖被廣泛稱為UX設計應用程式,但也可使用於快速原型設計的軟體。其他功能包括 Figmotion 和 Autoflow 等外掛程式及Arc Tool和Vector Networks 的可用性。

Webflow:網站編輯,所見即所得

近來流行的線上網頁架站平台,使用者大多介於「外行平面設計師」及「專業網站工程師」之間,即使不會 Coding 和切版,仍可輕鬆建置出個人風格強烈的網站。此平台提供乾淨、語意化的程式語言和設計加速開發人員的工作,內建程式為大眾皆可使用的零編碼,設計者便可直接創建網站的功能與版型,Webflow 會自動轉換為線上可使用的網站,因此不用等全部架構設計完成,便可即時看見在網路上的呈現。

Sketch:歷久不衰的經典UI/UX設計工具

以簡單功能與UI設計專門為訴求,早期成為UI/UX設計師慣用軟體,較資深的設計者大多首選以此為主軸的設計流程。可創建各種形式的使用者介面,例如瀏覽器、行動裝置或程式的按鍵執行,因此使用者已達全球數百萬工程師。

Sketch提供流暢的設計介面與豐富的繪圖功能,設計師可創建高質量圖像。強調介面性能的Sketch和可跨平台線上使用的Figma雖不同特點,但能使設計者專注、快速的解決問題才是重點。

本篇為系列文章,下篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(3)

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則,優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!()

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!()

2021最好用的12個UI,UX設計工具~通通收起來!!(1)

2021最好用的12個UI,UX設計工具~通通收起來!!(1)
2021最好用的12個UI,UX設計工具~通通收起來!!(1)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(1)

網頁設計、網頁開發、UIUX是什麼?

手機介面越做越人性化,美觀大方的頁面讓你一頁接著一頁的滑。這時你不禁會想:只要會做網站的話,就能輕鬆設計出這樣美觀的介面嗎?未必!網站設計與開發的領域其實可細分成使用者介面(UI)、使用者體驗(UX)、網頁設計(Web Design)和網頁開發(Web development)領域,簡介如下:

網頁設計 (Web Design) 

網頁設計是一個廣泛的類別總稱,涵蓋各種關於網站視覺效果、網站可用性的領域,包含UI/UX設計等。

網頁開發 (Web development) 

製作網站的技術端部分,專注於 coding,也就是擁有第一段所述「做網站」的能力。網站開發可分為網頁「前端」和伺服器端的「後端」。

使用者介面設計(UI設計,User Interface)

網頁設計的項目之一,處理人們與網頁、app互動的元件如按鈕、手勢識別

等。

使用者體驗設計(UX設計,User Experience)

另一個網頁設計的項目之一,處理用戶在使用網站或應用程序時的行為和感受。其實UX 設計的日常工作中,視覺表現只是其中的一個項目。他們需要針對用戶進行深度研究,可說是人類學、心理學、人因工程學等的跨領域學問。

一個手機版的網頁,為要兼顧兼顧便利及美觀,因此對於頁面的動線、順序、流程與使用細節上都需要重視。並確認UI所設計出來的視覺,能傳達UX設計師展示的路徑。簡單來說,UI設計傾向於眼睛所看見的「外在呈現」,UX則致力於使用者的「內在使用感受」。UI可以是將UX理念實踐的美學工程師,可透過以下12款常見的原型設計平台來執行:

Adobe XD:整合在雲端上的UI/UX設計

全名為 Adobe Experience Design,是UI/UX設計師最常見的向量繪圖程式,若原本在平面設計上習慣使用Adobe 出的 Photoshop或Illustrator等軟體,使用 Adobe XD 時對於其操作介面會更直觀、容易上手。

框線構成的形式,整合設計師的思維、現有的工作流程,設計出電腦版、行動裝置的網站介面,可隨時將原型設計圖輸出,直接分享給其他人觀看與操作,即時接收回饋與修改。

影片連結:https://youtu.be/h4D0GGlYL1o

本篇為系列文章,下篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(2)

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則,優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!()

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!()

把握七項美化按鍵的UI,UX原則就能提升營收?!(下)

把握七項美化按鍵的UI,UX原則就能提升營收?!(下)
把握七項美化按鍵的UI,UX原則就能提升營收?!(下)

你注重UI/UX的設計嗎?你知道網頁的按鍵設計對提升營收的重要性嗎?還不知道或不清楚地你千萬不要錯過今天幫大家整理好的文章!!(下)

本篇為下篇,上篇請點把握七項美化按鍵的UI,UX原則就能提升營收?!(上)

5. 按鈕在版面上的順序位置

循序漸進的按鈕順序如同使用者和系統之間的對話,在 UI 設計的過程中,不斷反問自己或換位思考,使用者點選按鈕的步驟,會希望達成什麼目的,並進行相對應的設計。比如:上一頁/下一頁的按鈕,左右方向的箭頭按鈕是常見呈現方式。

UI/UX-導覽按鈕

6. 避免過多的按鈕分散注意力

為了增進 UX 使用者體驗,會在同個頁面上增加各式各樣的按鈕,一不小心數量會比預期來得多,便會產生分流降低點擊率。比如:如果主要目的是想讓使用者點選頁面下載按鈕,使用者可能因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開,確保使用者點選到目標按鈕。

UI/UX-許多可能性

7. 加入音效或動畫產生互動

藉由人的五官體驗,在按鈕的設計上傳達聲音與動態效果加深使用者的體驗,試著營造出如同按鈕圖示呈現的舒適情境,當使用者點選時,產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時,通常會認為系統沒有接收到指令,而不斷的重複點選,便會導致多次不必要的操作。

方便點選的按鈕還有許多值得探討的 UI 設計技巧,以上所述的7個基本要點常用也是最容易忽略的一部分。優化按鈕設計的各種細節,探索各個細節對目標的點選,更能達成自己所理想的轉換成效。

UI/UX-互動

 

 

 

更多程式語言相關文章請點閱下方連結~

 

 

 

其他閱讀

隱私是基本人權!蘋果新功能「App 追蹤透明度」

Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄

Google 為保護隱私,棄Cookie 卻改用人工智慧?

Facebook 開源Python 語言的安全與隱私工具Pysa

人工智慧不再乖乖聽話?不再只會說YES!!竟還會說NO?!

猜猜Python在最新的七月程式語言排行榜中位居甚麼名次~

你的新網頁SEO要多久?猜猜Google怎麼說~

把握七項美化按鍵的UI,UX原則就能提升營收?!(上)

把握七項美化按鍵的UI,UX原則就能提升營收?!(上)
把握七項美化按鍵的UI,UX原則就能提升營收?!(上)

你注重UI/UX的設計嗎?你知道網頁的按鍵設計對提升營收的重要性嗎?還不知道或不清楚地你千萬不要錯過今天幫大家整理好的文章!!(上)

按鈕在網站上出現的頻率是相當高的,猶如實體店面的動線,協助顧客快速找到目標。隨著線上的商業發展蓬勃,網站設計上開始重視使用者觀看版面的體驗(UX),如何透由按鈕的佈局轉換為交易,並進一步提升營收。

雖然現今的網站美輪美奐,還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design,簡稱 RWD)的普遍,改善同時在手機、iPad與電腦不同裝置顯示問題,在版面中搭建使用者與系統之間的互動操作流程,仍不能缺少按鈕作為基礎視覺元素。

按鈕的設計不只是簡單的一個圖示,任何讓我們感到舒適方便的操作,都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理,加入外觀美學、色彩學等知識創建而成,分成以下7個基本要點說明:

1. 互動式的按鈕設計

建立按鈕需要使用正確的樣式,依照按鈕產生的狀態設計不同外觀,包含:大小、形狀、顏色、陰影等因素組成,再搭配上合適的字體與間距,藉由簡單的觸控、按下去即可達到目的,讓人享受到即時的強烈滿足感。

線上虛擬按鈕的視覺性,來自接觸實體按鈕的體驗和認知根深蒂固,UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。

以下是大多數用戶熟悉的幾個按鈕示例:

  1. 帶有方形邊框的按鈕
  2. 帶圓角的按鈕
  3. 帶陰影的按鈕
  4. 幽靈按鈕
UI/UX-各種按鈕示意圖

除了容易點選的按鈕樣式,保持與周遭文字適當的留白避免視覺干擾。

UI/UX-按鈕與周圍文字示意圖

2. 方便搜尋版面上的按鈕位置

使用者閱讀內容的同時,會搜尋版面可點選的功能按鈕,比如:下一頁、產品介紹等,如果使用者在視覺上尋找的時間愈久,若找不到按鈕,便不會知道它的的存在,愈容易感到網站不好使用。

為了和使用者不要玩追逐按鈕的遊戲,因此使用一致性的排版設計,便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局,足夠的留白與簡潔使版面不會太擁擠,即使不是強烈鮮明的按鈕,依然隨著閱讀動線吸引使用者輕鬆的點選。

3. 指令清楚的按鈕標示與說明

帶有誤導性資訊的按鈕標示,容易讓使用者感到迷惑。設計標示按鈕文字時,為了傳達出每個按鈕的作用,便需要簡短、有邏輯且適當的文字,讓使用者清楚了解點選按鈕後的結果,盡快獲得自己想要的內容,太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。

比如下列案例

UI/UX-沒有提示動作的按鈕示意圖

不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事?”

UI/UX-有提示動作的按鈕示意圖

與其按鈕標示“OK”,不如使用“Remove”,清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作,可以使用強烈的顏色來提醒。

4. 符合使用者習慣的尺寸大小

按鈕圖示讓 UI 觸控尺寸大於可視尺寸,確保互動可靠性,按下按鈕應該是一個簡單的任務,如果使用者無法成功地輕點按鈕,或在操作過程中感到無所適從,這會帶來負面的體驗,並且浪費時間。

按鈕的大小反應著在屏幕上優先順序,愈是優先的重點便會是愈大的按鈕表示,或是使用鮮明的對比色來凸顯,增加使用者的注意力。而在操作 UI 使用者介面過程中,按鈕需考慮對使用者觸控的友好度,按鈕太小,往往導致會有輸入錯誤的情況發生。

UI/UX-合適的按鈕示意圖
UI/UX-按紐大小

麻省理工學院觸控實驗室的研究發現,指尖的平均值在 10-14 mm之間,指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。

UI/UX-麻省理工研究合適的按紐大小

 

 

本篇為上篇,下篇請點把握七項美化按鍵的UI,UX原則就能提升營收?!(下)

更多程式語言相關文章請點閱下方連結~

 

 

 

其他閱讀

隱私是基本人權!蘋果新功能「App 追蹤透明度」

Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄

Google 為保護隱私,棄Cookie 卻改用人工智慧?

Facebook 開源Python 語言的安全與隱私工具Pysa

人工智慧不再乖乖聽話?不再只會說YES!!竟還會說NO?!

猜猜Python在最新的七月程式語言排行榜中位居甚麼名次~

你的新網頁SEO要多久?猜猜Google怎麼說~

讓Google輕鬆找到影片的15個SEO方法快學起來!(下)

讓Google輕鬆找到影片的15個SEO方法快學起來!(下)
讓Google輕鬆找到影片的15個SEO方法快學起來!(下)

Google更新影片SEO拉~想讓谷哥更快找到你的影片嗎?那千萬不要錯過今天為你整理的文章喔~~(下)

本篇為下篇,上篇請點讓Google輕鬆找到影片的15個SEO方法快學起來!(上)

允許 Google 擷取影片內容檔案

允許 Google 擷取影片檔案本身十分重要,因為若沒有事先設定好,即使將影片編入索引中,還是無法讓「影片預覽」或「重要時刻」等功能顯示在搜尋結果中。想要允許 Google 擷取影片可以參考以下作法:

6. 以支援的檔案格式提供

例如:MOV、MP4、MPEG、WMV……等等。

7. 避免阻擋搜尋機器人

避免使用 noindex 標記或 robots.txt 檔案等方式封鎖影片內容網址或網域,這會讓 Google 無法擷取影片的檔案。

8. 確認頻寬

確認所選擇的網站主機代管​以及實際處理影片的伺服器擁有實際的頻寬,才不會在 Google 嘗試讀取影片時超過負荷。

9. 建立固定 URL

為影片與縮圖建立穩定的網址,免得因為網址過期、更動或失連而導致無法順利查找。

啟用 Google 特定的影片搜尋功能

上一篇我們提過幾個名詞,如「影片預覽」、「重要時刻」等,這些都是 Google 為搜尋使用者提供的「摘要」,能讓人對影片有個基本認識、預先了解是否有自己想要的資訊等,和沒有摘要的影片比起來,這樣更能夠讓人想點開影片。

這些功能各有什麼效果呢?要如何才能有效顯示?

10. 影片預覽

為了讓使用者對影片有初步了解,Google 會將影片中的幾秒擷取出來當作動態預覽。只要允許 Google 擷取的影片,就能使用這項功能,也可以使用 max-video-preview  指令,來設定你希望提供預覽的時間上限喔。

11. 重要時刻

這一項功能,就像是在看書時能在目錄中看到章節的標題、在第幾頁一樣,現在 Google 也能在搜尋結果中看到,從幾分幾秒開始是怎麼樣的章節、各章節時間長度等等。

不用特別設定,系統就會自動偵測內容與分段,也可以透過提供結構化資料來自行設定每個片段開頭跟結束的時間、要放上什麼標籤。

而如果是上傳到 Youtube 的影片,只需在說明欄中標記時間、標籤,就能夠自動產生了。

12.  直播標記

有的時候你會想要透過實況的方式,和觀眾、粉絲們有最即時的互動,這時如何讓大家知道你正在直播就很重要了!

可以在結構化資料中提供你的直播預計開始時間、結束時間等資訊,如此一來當你在直播時,就能將你的實況在搜尋結果中貼上「LIVE」的紅色貼紙。

在網路上搜尋的意象圖,圖片來源:storyset.com

被判定成敏感內容怎麼辦?!

有時會發生影片被判定為內容錯誤、有較為敏感的內容或是版權問題等狀況,此時需要將影片設定為不會被搜尋到,或是排除特定地區、年齡的使用者,這是為了保護網站中的其他內容,避免被預防性歸為敏感內容,導致整個網站的曝光度都受到影響。

可參考以下方式:

13. 移除影片的搜尋結果

透過在網頁的 HTML 回傳 404 (Not found)狀態碼,或是將目標影片從索引中移除,亦可在結構化資料中指定到期日,如此一來,你的影片就不會被放在搜尋結果當中。

14. 依使用者的位置不同,顯示不同的影片搜尋結果:

在使用結構化資料描述影片時,能夠設定不同區域能見度的屬性,也可以從影片  Sitemap 的標記中設定是否要出現在特定國家、地區的搜尋結果中。

若是沒有設定的話,所有區域的使用者都能搜尋到這部影片。

15. 若有成人內容,最好針對安全搜尋進行設定:

有些使用者因年齡不足或是本身並不想看到煽情露骨內容,便會開啟安全搜尋的設定,這樣便能夠避免在 Google 搜尋結果中出現不想看到的圖片、影片和網站。

如果你的網站或影片有成人內容相關的元素,Google 會建議將其標上標記,並且要與其他全年齡向的影片有所區隔,才不會讓安全性演算法為了避免漏網之魚,而將整個網站的內容與影片都判定為敏感內容。

更多SEO或Google相關文章請點閱下方連結~

其他閱讀

SEO關鍵字研究教學1】關鍵字分類篇

SEO關鍵字研究教學2】冷門的長尾關鍵字篇

SEO關鍵字研究教學3】關鍵字挑選五步驟

網站核心指標5月將成SEO排名因素!LCP,FID,CLS詳解與優化方式

Google因為這項人工智慧技術而被多家瀏覽器抵制?()

Google將改用機器學習追蹤網頁?!這樣比較好嗎?()

SEO人員看到Google放寬這項標準後都笑了~真是這樣嗎?