爲何這些UI設計很糟糕？什麼是好的UI設計？

UI（User Interface），即界面設計，它是網站、App給用戶在感受（視覺、觸覺、聽覺等）和情感上帶來的第一體驗，包括人機交互、界面邏輯、界面美觀設計三個方面 。簡單來說，UI不只是一種表現形式，更是用戶對界面的體驗和信息交互意願。顯而易見，好的UI設計不只讓軟件有個性、品位，還讓用戶操做簡單溫馨，從而進一步體現軟件的定位和特色。那麼，到底什麼纔算是好的UI設計呢？在UI設計中有哪些常見的錯誤呢？UI設計師還有哪些應該避免的問題呢？下面小編一一爲你來解答。

好的UI設計 Vs. 糟糕的UI設計 ，區別在哪？

除了衆所周知的Kiss（Keep it simple and easy）產品設計原則外，好的UI設計應該也符合4個E的標準，即：

- Easy to use（方便使用）

- Easy to understand（簡單易懂）

- Error-free（零錯誤）

- Effective for the end-goal (or product)（有助於最終目標的實現）

相反地，糟糕的UI設計給人一種複雜難懂、太過平凡甚至落後的感受。若是是好的UI設計，會以一種直觀的方式地讓用戶明白如何與網站進行交互，即使是首次訪問某個頁面或App，也能快速瞭解它的操做流程及原理；而壞的UI設計，不只沒法體現設計者的創意，並且會在無心中給用戶傳遞誤導的信息，從而帶來不安感、糊塗感、挫折感、甚至憤怒感。固然，很差的UI設計會帶來糟糕的用戶體驗，你們看看最新發布的iPhone X的「劉海兒」就知道了…

那麼，什麼樣的UI設計是糟糕的呢？下面列舉了6個典型的例子及教訓，供你參考。

六個糟糕的UI設計案例，看看你中槍沒？

1. 缺少對比

當瀏覽網站時，咱們喜歡看頁面設計展現出乾淨、清爽的對比，這樣不只可讓內容可讀，並且能絕不費力地引導用戶。如圖，若是沒有足夠的對比度的話，不管是顏色仍是總體展現，都會讓人以爲有點摸不着頭腦，內容看起來能夠說是至關費力了。

錯誤案例示範：

正確案例示範：

2. 非響應式的設計

尤爲對於在手機上瀏覽時要放大、縮小界面元素的用戶來講，非響應式設計會形成諸多不便。咱們沒有任何藉口去建立一個在手機上很難用的網站，除非前期作了大量的用戶測試，並已經證實響應式設計並非必需的 。像下面這樣對移動用戶不友好的購物網站，會流失不少核心用戶及潛在客戶也是意料之中的事 。

錯誤案例示範：

正確案例示範：

3. 沒有用戶反饋、抄襲數據

從別人的設計中獲取靈感並不必定是件壞事，但前提要確保咱們擁有足夠多並且正確的用戶數據，從而帶來最佳的用戶及設計價值。像下面這樣的設計，就有種畫虎不成反類犬的感受了。

錯誤案例示範：

正確案例示範：

4. 混亂的架構

每一個設計師都但願本身的設計能脫穎而出、奪人眼球，但過於強調創造可能會帶來組織架構的混亂。保持視覺層次結構平衡能給用戶良好的初次印象。更重要的是，能向用戶傳遞更多網頁內容之外的信息。如圖，下面這個網頁的界面設計多少給人一種錯亂、分不清楚重點的感受。

錯誤的案例示範：

正確的案例示範：

5. 不一致的風格

混搭風格不必定都是糟糕的，但若是總體界面的看起來有巨大的、醜陋的視覺衝突，那麼仍是「回爐」從新設計較好。出色的UI設計具備一致性，它能讓用戶在訪問網頁時能清楚瞭解並控制當前的局面，從而提升工做效率。

錯誤案例示範：

正確案例示範：

6. 臃腫的表單

有時候咱們須要經過表單來收集必要的用戶信息，但過長、內容過多的表單不只很浪費時間，並且看起來也給人不清晰的感受。所以考慮把表單精簡或者進行分步驟展現，用戶體驗會更好。

錯誤案例示範：

其實像用戶表單、評論區這類帶有社交性質的界面元素，已經被愈來愈多的網站及App重視和使用。若是能增長用戶社交分享按鈕（好比微信、QQ、微博），或者經過輸入帳號來訂閱關注的信息，不只能夠增長有效的傳播途徑，還能增長用戶留存率。下面的設計案例，卻是能夠好好借鑑一下。

正確案例示範：

UI設計中有哪些常見的問題？

常見的問題有如下五個：

1. 過度地限制設計探索。因爲項目時間及風險等緣由，很多UI設計師其實在規劃設計方案前，並不能進行比較普遍、創意類的設計探索，從而沒法大膽地提議、限制了本身的做品表現力。對於設計團隊來講，用3－6個月的時間對產品迅速定位並配合產品運做模式來正面改變，是必需的。

2. 不夠人性化。這是設計中最重要也較容易被忽視的一點。全部設計都應該以人爲本、而不是照本宣科。咱們須要有更多的數據分析及素材資源，確保設計想法最終能被用戶接受並承認 。

3. 不清楚產品的受衆。簡而言之，應該根據本身的目標受衆、而非自身的喜愛來進行設計，打破設計格局，創造好的設計賣點。

4. 過早地精雕細琢。尤爲在設計初期時，會想把腦海中浮現的酷炫概念不假思索地畫出來，而後開始繪製高保真地模擬圖等。但最好的作法，仍是應該從不一樣的方面進行思考探索，挖掘更多、更有潛力的idea。

5. 過分地使用動效。說實話，無心義的動效設計幾乎隨處可見，這不只阻礙了用戶實現目標，並且讓人看着很厭煩（以下）。所以避免使用裝飾性的動畫效果，讓動畫特效的真正用於增強網站及應用的用戶體驗中。

結語

綜上所述，好的UI設計必定是在保證美觀的大前提下，保證結構清晰、注重用戶體驗、獨特、統1、且簡潔的。聽起來很簡單，對吧？實際要作到並不容易。即使可以吸取且確保前期的設計想法正確，但當實際運用時可能又會有不少未預料到的事情。從想法到落地的這一過程，纔是真正考驗我的能力的階段。

而一款好用的設計工具，不只可以幫助你更好地展示想法，同時能讓你在整個設計過程當中避免不少沒必要要的錯誤操做。其中，國民原型設計軟件Mockplus提供腦圖、UI流程圖及多種導出格式的項目樹，能直觀地展示各頁面之間的結構，設計思路沒毛病！

－海量封裝的組件及UI圖標，讓你的設計外觀有bigger、更better

－多種交互命令及豐富的組件屬性，讓你的設計動效有邏輯、更帥氣

－各種項目例子和模板，讓你的設計更有靈感、更輕鬆

若是你對本身的設計有信心、想挑戰優秀的設計達人，能夠報名參加Mockplus三週年設計大賽，做品提交併經過審覈即有免費試用贈送。