以下內(nèi)容由Mockplus團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流。

新手入坑，難免會(huì)做蠢事，犯錯(cuò)誤。當(dāng)初，作為UI設(shè)計(jì)新手菜鳥(niǎo)的小編， 也沒(méi)少犯錯(cuò)誤，走彎路。所以，小編這里為大家分享10個(gè)當(dāng)初常犯的設(shè)計(jì)錯(cuò)誤，希望能夠幫助剛?cè)胄械男』锇閭儽M量少走一些彎路。

接下來(lái)我們就一起看看都有哪些坑吧：

從未歸類(lèi)整理設(shè)計(jì)文件和資料

事實(shí)上，在最初開(kāi)始UI設(shè)計(jì)階段，小編根本就不知道：設(shè)計(jì)相關(guān)文件資料是需要從一開(kāi)始就打包分類(lèi)整理，以確保其他團(tuán)隊(duì)成員能夠隨時(shí)查看和取用。

而且重點(diǎn)是，當(dāng)時(shí)小編的設(shè)計(jì)文件完全是各種亂七八糟，有且僅有小編自己能夠看懂。其他設(shè)計(jì)師妄想查看或編輯， 嘿嘿，都只能滿(mǎn)頭問(wèn)號(hào)、無(wú)從下手。設(shè)計(jì)相關(guān)的各類(lèi)資源，例如常見(jiàn)的設(shè)計(jì)切圖、字體等等，有時(shí)甚至亂到小編自己都找不到。更別說(shuō)拿著堆文件資料向開(kāi)發(fā)進(jìn)行交付了。

也正因這不愛(ài)歸類(lèi)整理的壞習(xí)慣，小編也沒(méi)少吃苦。雜亂無(wú)章的文件設(shè)計(jì)資料，不僅會(huì)讓小編看起來(lái)很不專(zhuān)業(yè)，還會(huì)無(wú)形中制造更多的麻煩，讓整個(gè)設(shè)計(jì)流程更加繁亂復(fù)雜。

所以，在經(jīng)過(guò)一系列的嘗試和調(diào)整之后，小編總結(jié)出了以下幾條設(shè)計(jì)歸類(lèi)整理的經(jīng)驗(yàn)：

• 所有Sketch設(shè)計(jì)文件和切圖統(tǒng)一歸類(lèi)到一個(gè)文檔，并及時(shí)云端存儲(chǔ)和備份
• 命名所有設(shè)計(jì)圖層和組，方便后期查找和修改
• 命名所有設(shè)計(jì)畫(huà)板，并盡量水平排列，方便隨時(shí)查閱和修改編輯
• Sketch中不同頁(yè)面展示不同軟件應(yīng)用功能模塊，方便實(shí)時(shí)查漏補(bǔ)缺

忽略產(chǎn)品的可訪問(wèn)性設(shè)計(jì)

contrast 的對(duì)比

新手設(shè)計(jì)，非常容易忽略軟件的可訪問(wèn)性。集中于軟件外觀設(shè)計(jì)之后，往往就很容易忘記考慮不同受眾的人機(jī)交互情況。就如小編早期的一批UI設(shè)計(jì)作品， 就從未考慮到殘疾人受眾的需求， 從而完美忽略了產(chǎn)品的可訪問(wèn)性設(shè)計(jì)。

比如，設(shè)計(jì)界面按鈕或文案配色時(shí)，小編會(huì)盡量選擇對(duì)比度較小的色彩。 因?yàn)檫x用這樣的配色主題風(fēng)格更容易統(tǒng)一，外觀也會(huì)更加協(xié)調(diào)偏亮。又或者，小編習(xí)慣將界面文案字體尺寸縮小到10像素左右，以更好地實(shí)現(xiàn)界面內(nèi)容的水平展開(kāi)。

其實(shí)，這樣的產(chǎn)品設(shè)計(jì)，作為設(shè)計(jì)作品，通過(guò)各個(gè)社交平臺(tái)（例如dribbble）進(jìn)行展示分享， 并沒(méi)有什么大問(wèn)題。但是當(dāng)將其進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)，真正提供給用戶(hù)使用時(shí)，其可用性和可訪問(wèn)性就有待商榷了。

就如眾所周知的Domino群組工作軟件，最近就被一個(gè)無(wú)法訪問(wèn)其網(wǎng)站的盲人起訴。究其原因，僅僅是因?yàn)槠滠浖狈埣踩擞脩?hù)的可訪問(wèn)性設(shè)計(jì)。忽略可訪問(wèn)性設(shè)計(jì)的軟件應(yīng)用，就像是建造一個(gè)殘疾人無(wú)法進(jìn)入的餐館。其營(yíng)業(yè)額、信譽(yù)以及其它企業(yè)效應(yīng)，都會(huì)大打折扣。

所以，產(chǎn)品UI設(shè)計(jì)，可訪問(wèn)性不可忽視。

忽略產(chǎn)品的實(shí)用性設(shè)計(jì)

新手學(xué)習(xí)和技能提升階段，小編都堅(jiān)持著一件事：一切為了設(shè)計(jì)。簡(jiǎn)單來(lái)講，就是為了界面的整體布局和美感， 寧可犧牲用戶(hù)利益。而這樣必然也會(huì)影響軟件應(yīng)用的實(shí)用性。

產(chǎn)品UI設(shè)計(jì)，應(yīng)該以用戶(hù)需求為導(dǎo)向。雖然，作為設(shè)計(jì)師，這樣設(shè)計(jì)起來(lái)可能會(huì)很不便利，但是它卻是打造更加靈活、高效且實(shí)用的產(chǎn)品設(shè)計(jì)的關(guān)鍵。

大家不妨想一想: 當(dāng)小編設(shè)計(jì)社交類(lèi)軟件應(yīng)用時(shí)， 聊天界面的用戶(hù)名常?？刂圃?個(gè)字左右，測(cè)試和展示都非常正常。但這真的預(yù)示著用戶(hù)真實(shí)使用過(guò)程中也會(huì)一切正常嗎？當(dāng)擁有超長(zhǎng)姓名的用戶(hù)Hubert Blaine
Wolfeschlegelsteinhausenbergerdorff使用該軟件時(shí)， 又會(huì)發(fā)生什么呢？

對(duì)話(huà)框的對(duì)比

如圖，擁有超長(zhǎng)姓名的用戶(hù)使用起來(lái)， 聊天界面就不那么美觀實(shí)用了。

總之，在不斷學(xué)習(xí)、嘗試和總結(jié)過(guò)程中，小編設(shè)計(jì)技能日益成熟。設(shè)計(jì)視野也變得更加開(kāi)闊，輕松把握各種設(shè)計(jì)情境的同時(shí)，更多考慮設(shè)計(jì)的實(shí)用性， 而不再僅僅追求自己認(rèn)為完美的理想設(shè)計(jì)。

忽略設(shè)計(jì)的一致性

作為初學(xué)者，從零開(kāi)始設(shè)計(jì)時(shí)， 小編時(shí)常會(huì)忽略網(wǎng)頁(yè)或App設(shè)計(jì)中的一些基本設(shè)計(jì)技巧和準(zhǔn)則，而一味追求自己認(rèn)為整潔統(tǒng)一的東西。 但這樣的設(shè)計(jì)，反而會(huì)帶來(lái)更多的問(wèn)題，從而無(wú)限延長(zhǎng)整個(gè)設(shè)計(jì)過(guò)程。而以下是小編常犯一些設(shè)計(jì)錯(cuò)誤：

• 界面文案排版不一致（因?yàn)樵O(shè)計(jì)過(guò)程中，并未統(tǒng)一定義文案標(biāo)題和層級(jí)樣式）
• 設(shè)計(jì)規(guī)范系統(tǒng)并未統(tǒng)一， 導(dǎo)致組件樣式和填充方式混亂
• 界面組件填充方式和間距不一致，無(wú)法形成直觀統(tǒng)一的網(wǎng)格布局
• 界面圖標(biāo)選用時(shí)往往東拼西湊，風(fēng)格樣式不統(tǒng)一
• 軟件應(yīng)用主體配色不統(tǒng)一
• 廣大新手小伙伴們一定要盡量避免再犯以上的錯(cuò)誤。

忽略界面內(nèi)容的層級(jí)結(jié)構(gòu)設(shè)計(jì)

小編早期設(shè)計(jì)作品中，最明顯的錯(cuò)誤之一就是：很少注意界面信息的層級(jí)結(jié)構(gòu)。因?yàn)楫?dāng)時(shí)的小編在文案信息設(shè)計(jì)過(guò)程中，常常采用相同大小和粗細(xì)的字體進(jìn)行內(nèi)容呈現(xiàn)。這樣的設(shè)計(jì)看似簡(jiǎn)單整潔，但卻完全體現(xiàn)不出內(nèi)容的主次和重要程度。

而且在一些不必要的地方，也大膽采用各類(lèi)色彩，視覺(jué)上雖然炫酷，但卻錯(cuò)誤的突出了一些不必要的內(nèi)容。

所以，現(xiàn)今，在完成軟件設(shè)計(jì)之后， 小編會(huì)嘗試放空大腦，忘記之前的各種設(shè)計(jì)想法。然后，退后幾步，從更遠(yuǎn)的距離查看電腦屏幕所呈現(xiàn)的內(nèi)容，判斷其是否具有清晰的層次結(jié)構(gòu)，是否能夠與其主次和重要性一一匹配。

購(gòu)物頁(yè)面的模糊

如圖，退后幾步， 電腦屏幕所呈現(xiàn)的內(nèi)容雖然模糊，但整體內(nèi)容的層次結(jié)構(gòu)卻更明顯清晰。

盲目跟風(fēng)

如今，Dribbble里琳瑯滿(mǎn)目的優(yōu)秀設(shè)計(jì)，很容易讓設(shè)計(jì)師迷失。而盲目跟風(fēng)某個(gè)設(shè)計(jì)潮流，也很容易讓他們忘記他們的初衷。

比如，小編也有段時(shí)間也非常迷戀Dribbble。在上面找到一個(gè)炫酷的交互設(shè)計(jì)或設(shè)計(jì)風(fēng)格，就忍不住想要立即將它應(yīng)用到設(shè)計(jì)案例中。表面上看起來(lái)， 確實(shí)美觀炫酷。但實(shí)際上，很多時(shí)候，它們?cè)谛【幍能浖绦蛟O(shè)計(jì)中根本就不適用。

實(shí)時(shí)關(guān)注Dribbble，尋求最新設(shè)計(jì)靈感，無(wú)可厚非。 但是，盲目跟風(fēng)， 一味模仿， 反而會(huì)適得其反。

忽略開(kāi)發(fā)可行性的設(shè)計(jì)

產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)并不能做到完全的一一對(duì)應(yīng)。 由于各方面的限制，并非所有設(shè)計(jì)都能按照設(shè)計(jì)師希望的方式進(jìn)行實(shí)現(xiàn)。

例如，在具體的設(shè)計(jì)案例中，小編也曾遇到，在設(shè)計(jì)一個(gè)交互或用戶(hù)流程之后，才發(fā)現(xiàn)開(kāi)發(fā)起來(lái)非常困難，有時(shí)甚至是不合理的，最終不得不放棄這樣的設(shè)計(jì)。

所以，設(shè)計(jì)師也需要拓展自己的知識(shí)結(jié)構(gòu)，了解業(yè)務(wù)目標(biāo)、項(xiàng)目范圍、時(shí)間表和產(chǎn)品開(kāi)發(fā)方式等等，加深對(duì)產(chǎn)品的理解，從而打造更具可行性的設(shè)計(jì)。

上傳頭像

比如，小編在完成如圖用戶(hù)個(gè)人頁(yè)面設(shè)計(jì)時(shí)，添加了一個(gè)能供用戶(hù)上傳個(gè)人圖片資料的交互，以及允許用戶(hù)裁剪該圖片的功能模塊（如圖左邊的設(shè)計(jì)）。但是這樣的設(shè)計(jì)，開(kāi)發(fā)實(shí)現(xiàn)起來(lái)卻是非常復(fù)雜的， 他們更愿意采用使用單獨(dú)上傳按鈕的方式進(jìn)行實(shí)現(xiàn)。事實(shí)上，除非專(zhuān)門(mén)設(shè)計(jì)一款社交類(lèi)的應(yīng)用，添加此類(lèi)編輯個(gè)人圖片資料的功能設(shè)計(jì)，很可能會(huì)使整個(gè)設(shè)計(jì)實(shí)現(xiàn)過(guò)程變得更加復(fù)雜，而被認(rèn)為是不必要的設(shè)計(jì)。

忽略軟件應(yīng)用的各類(lèi)狀態(tài)設(shè)計(jì)

選色的對(duì)比

開(kāi)發(fā)實(shí)現(xiàn)階段，軟件各類(lèi)設(shè)計(jì)狀態(tài)缺失，必然會(huì)引起很多不必要的麻煩。要么，直接按原方案進(jìn)行實(shí)現(xiàn)，犧牲用戶(hù)利益。要么，則需要開(kāi)發(fā)工程師根據(jù)個(gè)人經(jīng)驗(yàn)添加補(bǔ)齊。當(dāng)然，這也必然會(huì)引起設(shè)計(jì)和執(zhí)行情況不一致，而延長(zhǎng)整個(gè)設(shè)計(jì)開(kāi)發(fā)過(guò)程。

其實(shí)，UI設(shè)計(jì)之初，小編也經(jīng)常跳過(guò)設(shè)計(jì)狀態(tài)這一步驟。所有的早期產(chǎn)品設(shè)計(jì)中，都完美的忽略掉了所有可能涉及的設(shè)計(jì)狀態(tài)，例如報(bào)錯(cuò)、完成、激活、禁用、懸停、填充、加載以及空狀態(tài)等等。

比如，設(shè)計(jì)一個(gè)心愿清單時(shí)， 設(shè)計(jì)師需要添加一個(gè)說(shuō)明狀態(tài)，即空狀態(tài)，以確保用戶(hù)在填寫(xiě)愿望列表之前解釋說(shuō)明相關(guān)情況。沒(méi)有這樣的狀態(tài)設(shè)計(jì)，用戶(hù)體驗(yàn)就會(huì)缺失，也必然給用戶(hù)造成困惑。而會(huì)忽略類(lèi)似狀態(tài)設(shè)計(jì)的往往是剛?cè)胄械男率郑?dāng)初的小編就沒(méi)少犯這樣的錯(cuò)誤。所以，大家一定要引以為戒。

過(guò)早開(kāi)始高保真設(shè)計(jì)

在小編看來(lái)，線框圖是UI設(shè)計(jì)中最基本的步驟之一。它能幫助設(shè)計(jì)師們準(zhǔn)確呈現(xiàn)和把握應(yīng)用程序的主要內(nèi)容和層次結(jié)構(gòu)。

當(dāng)然，直接開(kāi)始高保真設(shè)計(jì)并沒(méi)錯(cuò)。一切進(jìn)行順利的情況下，整個(gè)設(shè)計(jì)過(guò)程會(huì)加快很多倍。但是，當(dāng)設(shè)計(jì)的高保真原型概念從一開(kāi)始就不可行，或者遭到甲方駁回時(shí)， 反而需要花費(fèi)更多的時(shí)間，重頭開(kāi)始低保真原型圖設(shè)計(jì)。

因此，設(shè)計(jì)過(guò)程中，過(guò)早開(kāi)始高保真設(shè)計(jì)，并非好的設(shè)計(jì)方式。

并未準(zhǔn)確評(píng)估和安排設(shè)計(jì)任務(wù)

其實(shí)，小編也還在學(xué)習(xí)如何準(zhǔn)確評(píng)估和把握一項(xiàng)設(shè)計(jì)任務(wù)所需花費(fèi)的時(shí)間。這是一項(xiàng)會(huì)隨著時(shí)間推移、設(shè)計(jì)經(jīng)驗(yàn)的逐步累積而逐漸成熟的技能。即使是已經(jīng)擁有多年設(shè)計(jì)經(jīng)驗(yàn)的小編，現(xiàn)在也無(wú)法100%準(zhǔn)確把握和安排各類(lèi)設(shè)計(jì)任務(wù)的時(shí)間。

而小編現(xiàn)在和過(guò)去估算時(shí)間方式最大區(qū)別就在于：小編不會(huì)給自己或客戶(hù)設(shè)定不可能的期望。在實(shí)際時(shí)間估算過(guò)程中，大致了解一項(xiàng)任務(wù)可能需要的時(shí)間之后，小編會(huì)將實(shí)際安排時(shí)間盡量翻倍。

如此，不僅能夠預(yù)留足夠時(shí)間完成安排的設(shè)計(jì)， 還能在一半的時(shí)間內(nèi)就完成任務(wù)的情況下， 爭(zhēng)取超額交付， 確保設(shè)計(jì)進(jìn)度。

不過(guò)，除非必要，小編還是不太愿意提供時(shí)間預(yù)算。因?yàn)檫@會(huì)帶來(lái)額外的壓力。而這也很有可能會(huì)影響小編的創(chuàng)作過(guò)程。

總之，項(xiàng)目設(shè)計(jì)都有最后期限，而如何準(zhǔn)確合理地分配有限時(shí)間，按時(shí)完成設(shè)計(jì)任務(wù)，成為小編過(guò)去幾年里獲得另一個(gè)寶貴技能。