大家常見的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放寬這項標準後都笑了~真是這樣嗎?

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

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

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

SEO(Search Engine Optimization),意指根據搜尋引擎的規則運作、無須付費買廣告就能自然排序在搜尋結果最前位,增加能見度的方法。當使用者主動搜尋關鍵字,通常也就代表著感興趣,而人們往往只點擊前幾項搜尋結果,因此搜尋結果第一名可以說是兵家必爭之地

每日,都有上億的網友搜尋各種與新聞、美食、娛樂等等主題的相關內容,且越來越多人喜歡透過影片來接收資訊。

比起一篇文章,影片給人的感覺更有溫度、娛樂性更高、接收訊息的門檻也更低,因此除了網站排名之外,「影片」類 SEO 的重要性可說是與日俱增。

如果希望你的影片獲得更多的聲量與關注,就需時時掌握如 Google 等主要搜尋引擎的脈動,若搜尋引擎的演算法則有更新,就會使原本的搜尋結果排名發生變化,對流量的影響不容忽視。掌握 Google 搜尋排序背後的「潛規則」,才能讓影片被演算法則所青睞!

Google 的新影片 SEO 多了哪些重點呢?我們將分成上下篇,為大家詳細介紹。

協助 Google 找到您的影片

首先最重要的就是影片本身要讓使用者好找,也要讓 Google 好找!

1. 公開影片

確保影片位於公開的網頁,而且使用者不需要經過複雜的操作,即可載入影片,這樣除了方便 Google 找到之外,也能讓使用者更簡單的觀看影片。

2. 為影片加上適當的 HTML 標籤:

一份 HTML 文件中會有許多標籤 (tag),不同的標籤表示不同語意(semantic)內容的區塊, 如果加入如 <video>、<embed>、<iframe> 或 <object> 等HTML 標籤,可以讓 Google 更輕易辨別。

3. 提交影片 Sitemap

Sitemap 常常翻譯為「網站地圖」,就像是網站的目錄,將站內所有頁面依分類呈現。而影片 Sitemap 與一般 Sitemap 一樣,只是主要索引的是影片類型的內容。可以選擇專為影片建立一個 Sitemap,也可以在現有的 Sitemap 中嵌入影片  Sitemap。

另外要特別注意的是,提交 Sitemap 前得先在「Google Search Console」中新增並驗證你的網站。

Google Search Console 示意圖
Google Search Console 示意圖。Photo by Myriam Jessier on Unsplash

我是採用第三方內嵌播放器,怎麼辦?

有些人會使用 YouTube、Vimeo 或 Facebook 等平台來存放影片,再嵌入到網站中。

如果你是使用這種方法,還是可以提供結構化資料,或將網頁放入影片 Sitemap 中,來協助 Google 瞭解影片的內容。不過,也需要留意所使用的平台是否支援 Google 。

圖片來源:Google Developers。

確保影片能編入索引

4. 提供高畫質的縮圖

一張好的影片縮圖能夠大大吸引觀眾,同樣的,高品質縮圖也能吸引到 Google 演算法。

怎麼樣能被 Google 判定為「高品質」呢?可以透過 HTML 標記、在影片 Sitemap 中指定或在結構化資料中設定;也可以允許 Google 直接擷取影片內容,讓 Google 來自動產生縮圖。

如果沒有設定好的話,即使網頁已編入索引,也只會顯示藍色字體的一般連結而已。

5. 提供結構化資料

結構化資料是用來描述影片的相關資訊,讓 Google 能了解影片相關內容並在查詢結果中展示,其中包含了說明、縮圖網址、上傳日期、重要時刻和時間長度等資訊,這些摘要都會讓搜尋結果更一目瞭然喔!

除了這幾項重點之外,還更多方法能讓你的影片 SEO 優化,我們將在下篇為大家繼續介紹!

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

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

其他閱讀

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

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

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

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

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

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

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