建站
咨詢
售后
建站咨詢
新聞中心
作為開發(fā)人員，大家往往需要建立原型來證明自己的設(shè)計思路。其運作效果可能與預(yù)期相符，但用戶們驚恐的表情告訴我們其中存在問題，而整個效果演示也將因此變得毫無價值。在今天的文章中，我們將共同了解十項值得牢記的簡單指引與提示。
創(chuàng)新互聯(lián)專注于余江網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供余江營銷型網(wǎng)站建設(shè)，余江網(wǎng)站制作、余江網(wǎng)頁設(shè)計、余江網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造余江網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供余江網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
放松
大家可能聽過下面這句話：“好的設(shè)計在成功實現(xiàn)后應(yīng)該隱于產(chǎn)品之內(nèi)。只有糟糕的設(shè)計才會為用戶所察覺?！?- Jared Spool
這一箴言適用于全部設(shè)計人員，但特別契合開發(fā)者的情況。構(gòu)建演示的目標(biāo)在于證明自己的思路，因此用戶需要關(guān)注的應(yīng)當(dāng)是呈現(xiàn)在其面前的任務(wù)，而非“設(shè)計”。
***點: 專注于簡單而非華麗，演示的作用并不是要炫技，而是傳達(dá)思想。
如果“看起來有些別扭”，則嘗試去掉一切視覺效果并重新回歸基礎(chǔ)藍(lán)圖。
不要使用凌亂的色調(diào)
糟糕的色彩搭配對于眼睛絕對是種折磨。事實上，色彩的選擇應(yīng)該成為UI設(shè)計中的重要一環(huán)，甚至早在著手設(shè)計之前就做到心中有數(shù)。
這顯然不是我們希望的效果。
如果大家打算構(gòu)建一套UI，請盡可能簡化設(shè)計效果；使用基本形狀、線條與色彩。在布局關(guān)系設(shè)定之后再添加更多細(xì)節(jié)，推進調(diào)整并最終找到理想的搭配成果。
第二點: 不妨在演示中使用單色設(shè)計，利用灰階漸變進行對象區(qū)分——除非有明確理由使用色彩來著重突出某些元素。
就算什么也不做，效果也比之前好得多。
第三點: 作為設(shè)計共識，盡可能避免使用高飽和度色彩（例如純色或者純白），這樣的效果會讓人們“難以直視”。
第四點: 如果使用黑白搭配，注意使用深灰與淺灰來幫助用戶保護視力。
認(rèn)真思考如何運用黑色與灰色。正如Ian Storm Taylor在2012年給出的建議：
“陰影并非黑色”
Ian是在藝校課程上做出上述說明的——我也還記得，當(dāng)初我的老師曾讓學(xué)生們從Georges Seurat的《拉格蘭德·加特島上的周日午后》畫作上找出純黑的點。
答案是，其中根本不存在純黑的點。
第五點: 在為單色設(shè)計添加色彩時，注意一次只添加一種顏色。我們添加的每種色彩都可能影響用戶的注意力。不要使用高飽和色，但可以嘗試使用特定范圍內(nèi)的不同色相，這也是最為安全的色彩選擇辦法。
不要使用過于復(fù)雜的印刷元素
在演示與原型設(shè)計當(dāng)中，請盡可能使用系統(tǒng)內(nèi)的自帶字體。另外，請注意以下幾點：
第六點: ***不要使用serif（襯線）字體，這類字體的邊緣處理較為復(fù)雜，因此并非適合每種場景。
Serif字體往往能夠為設(shè)計成果加入個性元素，而且通常能夠讓文本易于閱讀。然而，其在UI設(shè)計中很少被用到，特別是在顯示面積有限的情況下。
注意:隨著屏幕分辨率的提升與清晰度的改善，具體取舍可以變得更加靈活。
Roboto & Noto
谷歌在其Android系統(tǒng)中采用了易于閱讀的Droid Sans字體，并在新版本中進一步調(diào)整為Roboto and Noto字體。蘋果在自家操作系統(tǒng)中使用的則是Neue Helvetica與San Francisco字體?；鸷麿S使用Fira Sans。注意到規(guī)律了嗎？皆為非serif字體。
第七點: 避免歧義。常見的易于混淆的組合包括O0、aeo、8B、Il1、5S、2Z、6b與9g，因此請認(rèn)真測試以避免用戶面對顯示內(nèi)容難以識別的問題。
Fira Sans字體（來自火狐OS）的清晰度就相當(dāng)不錯。
注意留白
在視覺設(shè)計當(dāng)中注意留白，這種寬敞的空間搭配有助于實現(xiàn)平衡感并降低用戶的閱讀強度。如果UI太過緊湊甚至擁擠，用戶往往會感到不適甚至很難有效處理任務(wù)。
在處理大量信息時，緊湊羅列數(shù)據(jù)往往更符合我們的設(shè)計直覺。但參考以下兩幅示例圖片，大家覺得哪幅效果更好？
標(biāo)題與內(nèi)容已經(jīng)擠占了整個頁面
為各單元格及周邊保留合理的空間
第八點: 留白設(shè)計往往越多越好，我們可以通過填充、增加邊距、調(diào)整表格高度等方式實現(xiàn)留白。
第九點: 請保持間距一致。使用標(biāo)準(zhǔn)單位作為基準(zhǔn)，例如以10px為基礎(chǔ)疊加空間。這種方式能夠帶來明確的節(jié)奏感與和諧效果。
非serif字體，單色轉(zhuǎn)變搭配，充足的空間外加間距一致性。
讓生活更輕松
放心大膽地使用Bootstrap與Foundation等框架。沒錯，也許有人會說它們都是一個模子里印出來的，嚴(yán)重缺乏創(chuàng)造力。但對于原型設(shè)計而言，它們絕對值得一試。
到這里，我們已經(jīng)探討了排版、色彩、間距、一致性以及表格等細(xì)節(jié)，遵循這些建議將讓大家的設(shè)計變得簡潔而有力。
第十點: 借鑒已有成果。大家可以直接使用現(xiàn)成的Bootstrap模板、Foundation模板、Material Design Lite、Skeleton、Pure CSS或者UIKit設(shè)計成果。另外，請在此基礎(chǔ)上隨意添加自己的風(fēng)格，同時牢記前面提到的各項原則。
這些框架皆屬于綜合性方案，大家可以任選所需并借此將想法轉(zhuǎn)化為現(xiàn)實。
總結(jié)
今天的文章并非探討設(shè)計基礎(chǔ)，而是從概念層面應(yīng)對原型設(shè)計中經(jīng)常出現(xiàn)的種種問題。如果大家身為開發(fā)者并希望向客戶或團隊提交產(chǎn)品構(gòu)建思路，那么上述原則應(yīng)該能夠幫助各位回避陷阱并達(dá)成目標(biāo)！
當(dāng)前題目：開發(fā)者應(yīng)當(dāng)牢記在心的十大設(shè)計原則
標(biāo)題URL：http://www.5511xx.com/article/dpdhpjh.html
