UI設計網站讓設計師們超省力!超值大禮包看這裡!(三)

UI 設計 網站給設計師們整理了30招,讓你超省力!

本篇為「UI設計網站讓設計師們超省力!超值大禮包看這裡!」的第 3 篇，第 2 篇請點此連結

範例17：顯示出項目的即時動態

在 UI 設計中，時常會用不一樣方法呈現出項目的不同狀態，例如：E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。

即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作

範例18：把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」

想像一下若是眼前的 UI 介面網頁上有兩個按鈕，其中一個標示「能替你省下一大筆錢！」，另一個寫著 「點這裡註冊」，肯定大部分使用者都會被前者吸引。

前者就是所謂「能帶來好處的按鈕」，能替使用者產生價值；而後者則是「任務導向的按鈕」，代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。

範例19：直接操作比多階層下拉式選單更直覺

直接處理畫面上的資訊，有時會比使用整合工具列還直覺，如多階層下拉式選單（context of button）雖然十分常見，但過多的階層可能會增加操作的步驟，所以下次 UI 設計 時不妨考慮減少階層或直接操作的方法。

範例20：若當下就可以操作，就不要再多開分頁！

當我們希望使用者做有價值的動作，如：留下聯絡方式、基本資料等，最好把填寫用的欄位或表單放置本頁上。若能與頁面整合在同一層，會比讓使用者連結到別頁輸入資料來的好。

精簡流程、讓使用者花最少的時間就能了解頁面資訊，並將簡單易懂的表單放置於該頁面上。除了方便性，也可藉此讓使用者預估填寫所需的時間，會更加增加使用者填寫的意願。

範例21：以過渡形式表現操作導致的 UI 介面改動

當使用者在與 UI 介面互動時，UI 設計成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為，也能協助使用者理解 UI 介面的使用方式

其實在變化過程中增加一些動態變化，也能達到尊重使用者的效果：故意延遲、以過渡形式表現尺寸或位置的變化，能讓使用者有更多時間、更有餘裕地去理解網頁的變動。

但需要注意的是，動態效果的時間最好在0.5秒以下，過長就可能引起使用者的不悅——特別是想要快速完成流程的使用者。

範例22：讓先使用者漸進式參與，而不是先要求註冊

比起劈頭就要訪客馬上註冊，不如先讓訪客們有機會體驗產品，或至少讓訪客先觀看使用案例、過往客戶回饋或是介紹影片！在訪客還在建立第一印象時彰顯出產品的功效，亦可以表現出與他牌的不同。

一旦使用者看到您產品的價值、並體會到能帶來的價值，他們會更樂意接受您之後分享的其他訊息。「漸進式參與」即是一種盡可能推遲註冊過程，但依方面卻能增添使用者主動註冊動機的方法。

範例23：嘗試減少線框，不要浪費精力在分割框架

使用者的耐心與時間都有限，所以 UI 設計 網頁如何爭分奪秒地抓住他們的注意力就十分重要。常見的設計會利用線框（border）來強調劃分不同內容，但也正是因為線條的明顯具體，反而導致使用者耗費更多專注力，因為線框區分出的區塊（box）若過多或安排不當，會讓人感覺雜亂不齊。

解決方法如：在設計之前就定義好內容與視覺之間的關係（例如色彩設計）、減少不必要的區塊、對齊不同的背景色，才能有效地減輕使用者的閱讀難度。

本篇為「UI設計網站讓設計師們超省力!超值大禮包看這裡!」的第 3 篇，第 4 篇請點此連結

相關文章:

特效不夠AI 來湊！迪士尼換臉技術達百萬畫素

Google Analytics「工作階段」定義與範例一次解析！

亞馬遜人工智慧出包 搞混國會議員與罪犯

人工智慧再突破！史上最強解馬賽克技術 64倍解析度還原成無碼

UI設計的小心機,讓你不自覺地被擄獲!(上)

UI設計中人見人愛的關鍵點就是這個!?(下)

行車視線死角好危險!人工智慧讓你駕駛無盲區!