網(wǎng)站制作、APP開(kāi)發(fā)都離不開(kāi)前端設(shè)計(jì)布局。（User Interface），即界面設(shè)計(jì)，它是網(wǎng)站、App給用戶在感覺(jué)（視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)等）和情感上帶來(lái)的第一體驗(yàn)，包括人機(jī)交互、界面邏輯、界面美觀設(shè)計(jì)三個(gè)方面 。簡(jiǎn)單來(lái)講，UI不僅是一種表現(xiàn)形式，更是用戶對(duì)界面的體驗(yàn)和信息交互意愿。顯而易見(jiàn)，好的UI設(shè)計(jì)不僅讓軟件有個(gè)性、品位，還讓用戶操作簡(jiǎn)單舒適，從而進(jìn)一步體現(xiàn)軟件的定位和特點(diǎn)。那么，到底什么才算是好的UI設(shè)計(jì)呢？在UI設(shè)計(jì)中有哪些常見(jiàn)的錯(cuò)誤呢？UI設(shè)計(jì)師還有哪些應(yīng)該避免的問(wèn)題呢？下面小編一一為你來(lái)解答。
一、網(wǎng)站設(shè)計(jì)、APP開(kāi)發(fā)前端制作經(jīng)驗(yàn)分享之好的UI設(shè)計(jì) Vs 糟糕的UI設(shè)計(jì) ，區(qū)別在哪？
除了眾所周知的Kiss（Keep it simple and easy）產(chǎn)品設(shè)計(jì)原則外，好的UI設(shè)計(jì)應(yīng)該也符合 4 個(gè)E的標(biāo)準(zhǔn)，即：
- Easy to use（方便使用）
- Easy to understand（簡(jiǎn)單易懂）
- Error-free（零錯(cuò)誤）
- Effective for the end-goal (or product)（有助于最終目標(biāo)的實(shí)現(xiàn)）
相反地，糟糕的UI設(shè)計(jì)給人一種復(fù)雜難懂、太過(guò)平凡甚至落后的感覺(jué)。如果是好的UI設(shè)計(jì)，會(huì)以一種直觀的方式地讓用戶明白如何與網(wǎng)站進(jìn)行交互，即便是首次訪問(wèn)某個(gè)頁(yè)面或App，也能快速了解它的操作流程及原理；而壞的UI設(shè)計(jì)，不僅無(wú)法體現(xiàn)設(shè)計(jì)者的創(chuàng)意，而且會(huì)在無(wú)意中給用戶傳遞誤導(dǎo)的信息，從而帶來(lái)不安感、糊涂感、挫折感、甚至憤怒感。當(dāng)然，不好的UI設(shè)計(jì)會(huì)帶來(lái)糟糕的用戶體驗(yàn)，大家看看最新發(fā)布的iPhone X的“劉海兒”就知道了…
那么，什么樣的UI設(shè)計(jì)是糟糕的呢？下面列舉了 6 個(gè)典型的例子及教訓(xùn)，供你參考。
二、APP制作與網(wǎng)站制作前端六個(gè)糟糕的UI設(shè)計(jì)案例，看看你中槍沒(méi)？
1. 網(wǎng)頁(yè)制作缺乏對(duì)比
當(dāng)瀏覽網(wǎng)站時(shí)，我們喜歡看頁(yè)面設(shè)計(jì)展示出干凈、清爽的對(duì)比，這樣不僅可以讓內(nèi)容可讀，而且能毫不費(fèi)力地引導(dǎo)用戶。如圖，如果沒(méi)有足夠的對(duì)比度的話，無(wú)論是顏色還是整體展示，都會(huì)讓人覺(jué)得有點(diǎn)摸不著頭腦，內(nèi)容看起來(lái)可以說(shuō)是相當(dāng)費(fèi)力了。
錯(cuò)誤案例示范：
正確案例示范：
2. 網(wǎng)站制作、APP 前端非響應(yīng)式的設(shè)計(jì)
尤其對(duì)于在手機(jī)上瀏覽時(shí)要放大、縮小界面元素的用戶來(lái)說(shuō)，非響應(yīng)式設(shè)計(jì)會(huì)造成諸多不便。我們沒(méi)有任何借口去創(chuàng)建一個(gè)在手機(jī)上很難用的網(wǎng)站，除非前期做了大量的用戶測(cè)試，并已經(jīng)證明響應(yīng)式設(shè)計(jì)并不是必需的 。像下面這樣對(duì)移動(dòng)用戶不友好的購(gòu)物網(wǎng)站，會(huì)流失很多核心用戶及潛在客戶也是意料之中的事 。
錯(cuò)誤案例示范：
正確案例示范：
3. 網(wǎng)站制作前端沒(méi)有用戶反饋、抄襲數(shù)據(jù)
從別人的設(shè)計(jì)中獲取靈感并不一定是件壞事，但前提要確保我們擁有足夠多而且正確的用戶數(shù)據(jù)，從而帶來(lái)最佳的用戶及設(shè)計(jì)價(jià)值。像下面這樣的設(shè)計(jì)，就有種畫(huà)虎不成反類(lèi)犬的感覺(jué)了。
錯(cuò)誤案例示范：
正確案例示范：
4. 網(wǎng)站設(shè)計(jì)之混亂的架構(gòu)
每個(gè)設(shè)計(jì)師都希望自己的設(shè)計(jì)能脫穎而出、奪人眼球，但過(guò)于強(qiáng)調(diào)創(chuàng)造可能會(huì)帶來(lái)組織架構(gòu)的混亂。保持視覺(jué)層次結(jié)構(gòu)平衡能給用戶良好的初次印象。更重要的是，能向用戶傳遞更多網(wǎng)頁(yè)內(nèi)容以外的信息。如圖，下面這個(gè)網(wǎng)頁(yè)的界面設(shè)計(jì)多少給人一種錯(cuò)亂、分不清楚重點(diǎn)的感覺(jué)。
錯(cuò)誤的案例示范：
正確的案例示范：
混搭風(fēng)格不一定都是糟糕的，但如果整體界面的看起來(lái)有巨大的、丑陋的視覺(jué)沖突，那么還是“回爐”重新設(shè)計(jì)較好。出色的UI設(shè)計(jì)具有一致性，它能讓用戶在訪問(wèn)網(wǎng)頁(yè)時(shí)能清楚了解并控制當(dāng)前的局面，從而提高工作效率。5. 不一致的風(fēng)格
錯(cuò)誤案例示范：
正確案例示范：
6. 網(wǎng)站前端制作經(jīng)驗(yàn)之臃腫的表單
有時(shí)候我們需要通過(guò)表單來(lái)收集必要的用戶信息，但過(guò)長(zhǎng)、內(nèi)容過(guò)多的表單不僅很浪費(fèi)時(shí)間，而且看起來(lái)也給人不清晰的感覺(jué)。因此考慮把表單精簡(jiǎn)或者進(jìn)行分步驟展示，用戶體驗(yàn)會(huì)更好。
錯(cuò)誤案例示范：
其實(shí)像用戶表單、評(píng)論區(qū)這類(lèi)帶有社交性質(zhì)的界面元素，已經(jīng)被越來(lái)越多的網(wǎng)站及App重視和使用。如果能增加用戶社交分享按鈕（比如微信、QQ、微博），或者通過(guò)輸入賬號(hào)來(lái)訂閱關(guān)注的信息，不僅可以增加有效的傳播途徑，還能增加用戶留存率。下面的設(shè)計(jì)案例，倒是可以好好借鑒一下。
正確案例示范：
三、APP開(kāi)發(fā)前端UI設(shè)計(jì)中有哪些常見(jiàn)的問(wèn)題？
常見(jiàn)的問(wèn)題有以下五個(gè)：
1. 過(guò)分地限制設(shè)計(jì)探索。由于項(xiàng)目時(shí)間及風(fēng)險(xiǎn)等原因，不少UI設(shè)計(jì)師其實(shí)在規(guī)劃設(shè)計(jì)方案前，并不能進(jìn)行比較廣泛、創(chuàng)意類(lèi)的設(shè)計(jì)探索，從而無(wú)法大膽地提議、限制了自己的作品表現(xiàn)力。對(duì)于設(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，用3－ 6 個(gè)月的時(shí)間對(duì)產(chǎn)品迅速定位并配合產(chǎn)品運(yùn)作模式來(lái)正面改變，是必需的。
2. 不夠人性化。這是設(shè)計(jì)中最重要也較容易被忽視的一點(diǎn)。所有設(shè)計(jì)都應(yīng)該以人為本、而不是照本宣科。我們需要有更多的數(shù)據(jù)分析及素材資源，確保設(shè)計(jì)想法最終能被用戶接受并認(rèn)可 。
3. 不清楚產(chǎn)品的受眾。簡(jiǎn)而言之，應(yīng)該根據(jù)自己的目標(biāo)受眾、而非自身的喜好來(lái)進(jìn)行設(shè)計(jì)，打破設(shè)計(jì)格局，創(chuàng)造好的設(shè)計(jì)賣(mài)點(diǎn)。
4. 過(guò)早地精雕細(xì)琢。尤其在設(shè)計(jì)初期時(shí)，會(huì)想把腦海中浮現(xiàn)的酷炫概念不假思索地畫(huà)出來(lái)，然后開(kāi)始繪制高保真地模擬圖等。但最好的做法，還是應(yīng)該從不同的方面進(jìn)行思考探索，挖掘更多、更有潛力的idea。
5. 過(guò)度地使用動(dòng)效。說(shuō)實(shí)話，無(wú)意義的動(dòng)效設(shè)計(jì)幾乎隨處可見(jiàn)，這不僅阻礙了用戶實(shí)現(xiàn)目標(biāo)，而且讓人看著很厭煩（如下）。因此避免使用裝飾性的動(dòng)畫(huà)效果，讓動(dòng)畫(huà)特效的真正用于加強(qiáng)網(wǎng)站及應(yīng)用的用戶體驗(yàn)中。
四、網(wǎng)站制作結(jié)語(yǔ)
綜上所述，好的UI設(shè)計(jì)一定是在保證美觀的大前提下，保證結(jié)構(gòu)清晰、注重用戶體驗(yàn)、獨(dú)特、統(tǒng)一、且簡(jiǎn)潔的。聽(tīng)起來(lái)很簡(jiǎn)單，對(duì)吧？實(shí)際要做到并不容易。即便能夠吸收且確保前期的設(shè)計(jì)想法正確，但當(dāng)實(shí)際運(yùn)用時(shí)可能又會(huì)有很多未預(yù)料到的事情。從想法到落地的這一過(guò)程，才是真正考驗(yàn)個(gè)人能力的階段。
而一款好用的設(shè)計(jì)工具，不僅能夠幫助你更好地展現(xiàn)想法，同時(shí)能讓你在整個(gè)設(shè)計(jì)過(guò)程中避免很多不必要的錯(cuò)誤操作。其中，國(guó)民原型設(shè)計(jì)軟件Mockplus提供腦圖、UI流程圖及多種導(dǎo)出格式的項(xiàng)目樹(shù)，能直觀地展現(xiàn)各頁(yè)面之間的結(jié)構(gòu)，設(shè)計(jì)思路沒(méi)毛病！
－海量封裝的組件及UI圖標(biāo)，讓你的設(shè)計(jì)外觀有bigger、更better
－多種交互命令及豐富的組件屬性，讓你的設(shè)計(jì)動(dòng)效有邏輯、更帥氣
－各類(lèi)項(xiàng)目例子和模板，讓你的設(shè)計(jì)更有靈感、更輕松 ，深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。
