把握七項美化按鍵的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怎麼說~

UX,UI設計大解析:怎麼讓UX,UI相輔相成?

UX,UI設計大解析:怎麼讓UX,UI相輔相成?
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!系列最後一篇~怎麼讓UX,UI相輔相成?一定要知道~

本篇為【UX,UI設計大解析】系列的第 5 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

結語:如何讓 UI/UX 相得益彰?

即使 UI 設計UX 設計是截然不同的專業、各自涉及迥異的技能,但它們都是彼此不可或缺的存在。

即使有精雕細琢的介面設計,也無法掩飾笨拙又難用的操作流程;而枯燥乏味的視覺設計也會無法吸引使用者、從而埋沒了出色的使用體驗。

UI 設計師確立使用者介面的外觀,而 UX 設計師安排使用者介面的運作。在 UX 設計師在鑽研如何用有限的篇幅、提供使用者最多又不會過多的資訊時,UI 設計師正在努力讓這些繁雜的訊息精美地呈現在螢幕上。這是一個非常需要合作的過程,也有賴雙方緊密且良好的溝通。

以行動號召按鈕(Call to Action,CTA)為例,看 UX 與 UI 的分工:

1.UX 設計

提出需要多增加一個按鈕、為何如此能讓使用者滿意、決定如何重新安放所有按鈕。

2.UI 設計

設計新按鈕的外觀,而其他按鈕也可能受影響而需重新調整如形狀、顏色、大小、特效等外觀。

3.UI、UX 設計師重疊的互動設計

當使用者點下按鈕後將會導向某個頁面,UI 著重在按鈕外觀的能見度與視覺導引;而 UX 則著重在導向的網頁是否能滿足使用者的期待。

如此這般,UI 設計UX 設計師需要不斷地溝通協作,才能確保彼此的設計都能完美執行、與使用者的期望完美地吻合,最終創造出優秀的使用者介面與體驗。

如果你正在規劃要朝 UI 還是 UX 領域邁進,那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域,建議這兩個方面都可以嘗試一下,有了在這兩個領域的實際經驗,不僅可以更了解自己適合哪個領域,也可以使你無論最後選擇哪一個,都能成為更好的設計師!

 

 

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

UX,UI設計大解析:UX,UI都需要研究驗證?!

UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:UX,UI都需要研究驗證?!

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!這篇要來談的是UX,UI都需要研究驗證?!

本篇為【UX,UI設計大解析】系列的第 4 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

研究是關鍵!無論 UIUX 都需要研究驗證

UIUX 若想要盡善盡美,最重要的的就是要做各種事前研究!

無論是 UI 設計UX 設計師,都必須先做各種功課——盡可能收集資料、行為數據以研究使用者的需求,思考、分析和預測使用者在當下可能的行為、行為背後的動機以及隨之而來的體驗感受。

而研究所得的數據資料將應用在初版設計上,接著有的 UIUX 設計師會透過真人測試或使用者訪談,取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案,以確定設計能朝著正確的方向前進。

即使無法進行真人測試,也會透過 A/B 測試、易用性測試(Usability test)等方式在開發時就先測試找出問題,進一步對設計進行修改或優化。

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

而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次,這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比,疊代式開發能降低風險、提早得到使用者反饋,也具有更高的效率和成功率。

採用這種方法,可以在完全確定設計需求之前就開始進行開發,在一次疊代中先完成一部分設計,再通過使用者的回饋來細化,再開始新一輪的疊代。

對於 UI 和 UX 設計師來說,事前研究都至關重要,也都使用類似的方法,以求規劃出得宜的設計。

 

本系列文章未完,下一篇請點UX,UI設計大解析:怎麼讓UX,UI相輔相成?

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

 

UX,UI設計大解析:UX設計的優點有哪些?!

UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!

UX 設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UX設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 3 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

什麼是 UX 設計

UX 表示「使用者體驗」(User experience),顧名思義強調的是「使用者的感受」。

為了帶給人們良好的體驗,必須先進行使用者洞察、產品研究、市場趨勢研究,到建立資訊架構、規劃任務流程、繪製線框圖(Wireframe)和與 UI 設計師溝通互動設計與視覺設計間的怎麼互相調和,最後交棒給工程師。

而使用者會得到怎麼樣的體驗,取決他們如何與應用程式互動:希望體驗流暢、直觀?那導引要設計的合乎邏輯;想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭?這都取決於 UX 設計師的功力。

▲ 設計思維是一種以人為本的創新方法,它汲取了設計師的靈感,將人的需求,技術的可能性以及業績成功的需求整合在一起(來源:Unsplash)

 

當然使用者介面和體驗有著相輔相成、缺一不可,因此 UX設計師會跟 UI 設計師密切合作,這也是為什麼許多人會混淆兩者。不同的是,UI 設計師的任務是確定使用者介面的外觀,而 UX 設計師負責確定使用者介面的結構、功能、操作方式和反饋體驗。

簡而言之,UX 如果設計良好、直觀又流暢,則使用者將獲得良好的體驗;反之則可能會把使用者趕跑,UX 設計師的工作就是努力避免出現第二種情況。那一個好的 UX 設計會具有哪些特色呢?

好的 UX 設計 會具有的優點:

身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》(Designing for Emotion)一書中,告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。

此書中參考馬斯洛需求理論、提出「使用者需求理論」,成為 UX 設計師思考與決策的重要參考:

▲ 「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性

 

「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性。

從金字塔我們可以看出,產品所提供的「功能」是最基本需求;「可靠性」則是指在一定的條件、時間內穩定地達成使用者的需求;「實用性」表示使用者能順利透過產品完成他們的需求、並未來若有相同需求的時候,優先想到你的產品;最頂端的「趣味性」能滿足使用者的心理需求,作為與使用者的情感紐帶,讓使用者對產品產生好感與認同。

以上是 UI、UX 的差異分析與介紹,那它們兩者有什麼相同呢?又要如何才能相輔相成、成為完美的設計呢?

UX 設計人員也常會利用叠代式開發(iteration),即先製作其介面互動的線框稿,並以此獲得使用者的回饋,再將其整合到設計之中,獲得更好的版本。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX,UI都需要研究驗證?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

 

UX,UI設計大解析:UI設計的優點有哪些?!

UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UI設計的優點有哪些?!

對UX設計和UI 設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UI設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 2 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

但隨著對 UI、UX 的認識日漸普及,目前的分工也越來越明確了,接著讓我們來看看 UI 和 UX 究竟是什麼吧。

什麼是 UI 設計

UI 表示「使用者介面」(User Interface),無論是網頁、手機 APP 或是電腦軟體,只要眼睛所見的頁面都是 UI 設計的守備範圍。

從吸引使用者點擊的按鈕、閱讀的文字、文字輸入欄、空間配置、畫面排版、轉場和任何形式的視覺元素,一同組成一個龐大的視覺佈局。

▲ 這張照片是攝影師 Lubos Volkov 為 UX Store 拍攝的,同時提供了有關「如何成為更好的設計師」的提示。在你的技能達到一定的水平之後,就要不斷地學習新事物。(來源:Unsplash、uxstore.com)

 

除此之外,UI 也是人和電腦相遇的地方──電腦具備某種功能,人想要利用這些功能,需要進行「輸入」(inputs)和「輸出」(outputs)。介面就是輸入和輸出的規劃安排,讓人們得以應用電腦來創造出他們所需結果。

以上工作由 UI 設計師負責,他們選擇配色方案、按鈕形狀、線條的寬度和文字的字體,精心打磨每一處「眉角」。而一個好的 UI 設計通常具有以下特色……

好的 UI 設計 會具有的優點:

1. 清晰

介面的所有視覺元素皆脈絡分明、一目瞭然,使用者不需要刻意思考每個元素的含意。

2. 熟悉

使用者可以依照過往習慣操作你的介面,如:點擊一次為選取、點擊兩次則為打開該項目。

3. 一致性

保持整個介面的風格一致,這樣使用者可以習慣操作模式。

4. 防呆機制

一個好的使用者介面該避免使用者不小心犯錯。

5. 事半功倍

好的介面可以讓使用者以最少的「輸入」達成所需的「輸出」,還能讓有經驗的使用者更有效率操作。

▲ 一名設計師正在繪製 wireframe。(來源:Unsplash)

 

待設計完成後,UI 設計師會寫上標註和說明,轉交給工程師進行撰寫。因需要與工程師溝通配合,UI 設計師必須跟上科技的進步,對程式語言也要一定程度的了解,避免產生和工程師溝通不良的狀況。而帶有前端工程師及設計師雙技能的人會被稱為「介面工程師」(UI Developer),可以自己設計畫面也自己寫出網頁。

UI 設計師有時也會與「平面設計師」(Graphic designer)一同被討論,他們同樣關心美學、同樣要使介面充滿魅力、引人注目並切和主題,但平面設計師不需考慮「使用者怎麼操作」的問題,平面設計基本上也不需要被操作;而 UI 設計師則要思考如何引導使用者操作並完成任務,故兩者還是大不相同的。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX設計的優點有哪些?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

UX,UI設計大解析:UX,UI不再傻傻分不清!!

UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UX,UI不再傻傻分不清!!

對UX設計和UI 設計 感興趣嗎?那千萬不能錯過這一系列文章!!這片就讓你一次弄清UX,UI差別!!

本篇為【UX,UI設計大解析】系列的第 1 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

UI vs. UX 設計 – 為什麼容易搞混?

UI 設計UX 設計 常常被混在一起使用、或將兩者視為同一種專業,也有不少公司開出「UI 設計師」的職缺,卻要求應徵者兩種能力兼而有之。

除了因對 UI、UX 不甚了解外,其中一個原因是 UX 包含的事情較為廣泛:從介面設計、視覺風格、程式功能和運作效能等等都是其中一環,與 UI 設計或多或少有所重疊。而且許多專業設計師對這兩種專業都有涉獵,久而久之就常見 UI、UX 並稱的狀況了。

▲ UI、UX 設計雖為不同專業,但在某些方面會有重疊。(來源:Asinthecity)

 

本系列文章未完,下一篇請點UX,UI設計大解析:UI設計的優點有哪些?!

更多UI設計相關文章請點閱下方連結~

 

 

給UI,UX設計師的設計心理學小教室!!

給UI,UX設計師的設計心理學小教室!!
給UI,UX設計師的設計心理學小教室!!

UI,UX設計師們除了要有些專業和美感外還要懂一點心理學喔!!

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有幫助,其中有一條:平均每個人在記憶時候最大數量為7個。

另外一條是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知是設計領域的重中之重,特別是產品設計師和UIUX設計師,作為設計師需要去了解和運用這些定律,提升用戶視覺感知。

什麼是視覺感知

視覺感知是人們能夠獲得信息,並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力,從而組成視覺。 腦部將眼睛接收到的物象信息,分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據,我們可辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快,所有信息以圖形存儲,人眼閱讀圖像比文字更快,在絕大多數情況下,人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的,所以視覺感知機制通常應該在設計過程中考慮,研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像,即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律,很簡單也好記憶:

1.集中:要記住一件事情或大量的數據,需要集中精力。 否則,數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶:大腦裡其實有個巨大的網絡連接,我們會自動將感知到的新的片段能和舊的片段聯繫關聯,感知就會越強,也在設計中也就是常說的用戶習慣。

3.重複:不斷去重複激活一些片段,直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用,通過設計強調突出我們想表達的內容,突出重要信息,通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用

1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要,如果同時提供了幾個選項,按鈕,選項,用戶的短期記憶會花費更多的時間和精力來考慮,這時候隨時可能會讓用戶跳失。 米勒定律:每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律:人​​們選擇的元素越多,越難選擇。 一但選擇點很多,越是猶豫,分散,特別在電商設計裡面,我們需要平衡所有的信息,給予用戶最有用信息和行動點。

3.通過圖像強化感知, 除了圖標,還可以通過圖像來強化感知力,我們應該掌握圖像處理的手法,通過不同的形式來組織內容,圖片沒有秘密也最直接,最能被記憶

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動,能記住用戶路徑和數據;因此,設計導航時候,交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多,我們重要的是要記住,界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此,關於漢堡包菜單,滑塊,隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計,不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。

視覺感知心理學,更多幫助我們在做設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過設計去改變引導用戶,管控好用戶使用路徑,能更好幫助產品成功。

更多UIUX相關文章請點閱下方連結!!

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

2天考取Google Ads證照!新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照

UI設計小教室:奧迪,福斯LOGO平面化(上)

UI設計小教室:奧迪,福斯LOGO平面化(上)
UI設計小教室:奧迪,福斯LOGO平面化(上)

UI設計小教室登場啦!!今天要來跟大家分享奧迪,福斯的LOGO設計!!不要錯過了~(上)

AUDI 的「數位優先(digital-first)」UI 視覺辨識


▲ 因應 Audi 的「數位優先」品牌重塑計畫,德國設計公司 Strichpunkt 幫 Audi 打造出極簡一致、功能為主的跨平台 UI 介面。主要元素為區塊佈局、簡單配色、獨特的 Audi 字體以及平面化的 Audi 標誌

現今人們上網的媒介已不再侷限於桌上型電腦,手機上網、或是在車上裝設平板電腦上網早已普及。因此德國汽車公司 Audi 早在於2017 年透露了他們的品牌重塑(rebrand)計畫,以「數位優先(digital-first)」為其主軸。

「數位優先(digital-first)」的品牌重塑(rebrand)計畫聚焦於數位裝置的 UI 設計,期望更多用戶,無論是使用平板、手機、桌上型電腦等上網媒介瀏覽 Audi 網站、或是使用 Audi 的 APP 等上網行為,都能有更好的使用者體驗(UX)。德國的設計公司 Strichpunkt 負責這次 Audi 品牌重塑計畫的 UI/UX 設計,並期望讓所有的數位平台 —— 從 Audi 的網站、app 應用程式到車上的數位裝置(包含數位螢幕、聲音 app 及包含智慧手錶在內的所有數位產品等)都維持一致。


▲ Audi 的「原子設計(atomic design)」基本概念。

此次「品牌重塑」專案可說是顛覆性的翻新,Strichpunkt 創建了新型態的「原子設計(atomic design)」思路:在評估數位設備的外觀時,我們將 Audi 的視角變化應用於設計上面。。 我們的思考過程不只是從最小的設備開始,而且是從設計的最小元素開始。」延續此「原子設計」的設計方法, Strichpunkt 建構出一套功能優先、走極簡風格的 UI 使用者界面。這套新 Audi UI 用戶界面已於 2017 年公開於網路上:任何人都可以從 GitHub 或是 Audi UI Photoshop kit 下載使用 Audi 圖標,UI 組件和字體。


▲ Audi 的新 UI 介面佈局

簡要概述一下這次 Audi 的新 UI 設計:「介面佈局大至上分為垂直和水平的區塊,以達成視覺上的平衡。內容則顯示在這些方形區塊中;而這些方形區塊也置入於與設備的(螢幕)邊緣隔開的網格中。當這些方形區塊被賦予其他的附加功能時,則被視為「卡片」。為了被使用者重視,所有的元素都在階層式的結構中突出顯示。

▲ 替 Audi 設計新 Logo 的設計公司 Strichpunkt 上傳的 Audi 品牌重塑影片-展示了 Audi 的品牌形象、字體、網站以及各裝置的 UI 使用者介面。

根據裝置螢幕的大小,Strichpunkt 使用了簡單的黑色、白色、灰色、紅色和不同色階的銀色,以及不同的字體大小。您可以在這裏找到更多有關Audi UI 使用者介面設計的詳細信息。

▲ Strichpunkt 為了 Audi 的新 UI 設計,所打造的全新 2D 化 Logo、新 Audi 字體、品牌配色;下方則是用於網站、app、車用數位裝置的線條化圖標以及 S 型曲線模式

新的Audi Logo-2D扁平化

▲ Audi 的新 Logo 由原本的立體風變為 2D 平面風,俐落的外型更適用於嵌入各式各樣的設計。

Strichpunkt 替 Audi 完成了新的 Logo 設計,一改原本的「仿3D」立體設計,而以 2D 的 Logo 取代之。Logo 造型為扁平的四個圈圈、沒有品牌文字在 LOGO 下方、顏色非黑即白。

本篇為Audi篇上集,Audi篇下集【為落實“數位優先”的UI設計…Audi竟將LOGO壓扁了!】請點此UI設計小教室:奧迪,福斯LOGO平面化(中)

 

想看更多UI,UX的文章請點下方連結~

 

 

 

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

2天考取Google Ads證照!新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照

UI,UX設計師非懂不可的視覺感知心理學~

UI,UX設計師非懂不可的視覺感知心理學~
UI,UX設計師非懂不可的視覺感知心理學~

你是UI,UX設計師嗎?你懂甚麼是視覺感知心理學嗎?還不知道的同學快往下讀吧!!

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有幫助,其中有一條:平均每個人在記憶時候最大數量為7個。

另外一條是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知是設計領域的重中之重,特別是產品設計師和UIUX設計師,作為設計師需要去了解和運用這些定律,提升用戶視覺感知。

圖片

什麼是視覺感知

視覺感知是人們能夠獲得信息,並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力,從而組成視覺。 腦部將眼睛接收到的物象信息,分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據,我們可辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快,所有信息以圖形存儲,人眼閱讀圖像比文字更快,在絕大多數情況下,人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的,所以視覺感知機制通常應該在設計過程中考慮,研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像,即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律,很簡單也好記憶:

1.集中:要記住一件事情或大量的數據,需要集中精力。 否則,數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶:大腦裡其實有個巨大的網絡連接,我們會自動將感知到的新的片段能和舊的片段聯繫關聯,感知就會越強,也在設計中也就是常說的用戶習慣。

3.重複:不斷去重複激活一些片段,直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用,通過設計強調突出我們想表達的內容,突出重要信息,通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用

1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要,如果同時提供了幾個選項,按鈕,選項,用戶的短期記憶會花費更多的時間和精力來考慮,這時候隨時可能會讓用戶跳失。 米勒定律:每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律:人​​們選擇的元素越多,越難選擇。 一但選擇點很多,越是猶豫,分散,特別在電商設計裡面,我們需要平衡所有的信息,給予用戶最有用信息和行動點。

3.通過圖像強化感知, 除了圖標,還可以通過圖像來強化感知力,我們應該掌握圖像處理的手法,通過不同的形式來組織內容,圖片沒有秘密也最直接,最能被記憶

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動,能記住用戶路徑和數據;因此,設計導航時候,交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多,我們重要的是要記住,界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此,關於漢堡包菜單,滑塊,隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計,不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。

視覺感知心理學,更多幫助我們在做設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過設計去改變引導用戶,管控好用戶使用路徑,能更好幫助產品成功。

更多UIUX相關文章請點閱下方連結!!

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

2天考取Google Ads證照!新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照