起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)注意這十點(diǎn)，讓你避免糟糕的設(shè)計(jì)
本文是給初學(xué)者/門外漢的五分鐘設(shè)計(jì)指南。好的設(shè)計(jì)原則對(duì)任何人來說都有用。這個(gè)指南會(huì)告訴你一些基礎(chǔ)設(shè)計(jì)原則，立即就能用得上并分享給別人。
如果你不相信自己能夠做好設(shè)計(jì)，那么請(qǐng)記住傳說中的人物David Eric Grohl說過的這段話：
我從不學(xué)習(xí)打鼓課程，從不學(xué)習(xí)吉他課程，我靠自己摸索。我認(rèn)為倘若你真的對(duì)什么東西有所熱誠，你就會(huì)有動(dòng)力，你就會(huì)集中注意力，你可以做任何你想做的事情。
——Dave Grohl，噴火戰(zhàn)機(jī)樂隊(duì)
記著上面那段話，你準(zhǔn)備好要開始速成課了嗎？讓我們開始吧（沒有特定順序）：
1. 足夠強(qiáng)烈的色彩對(duì)比
背景和字體必須有足夠區(qū)分，閱讀起來不傷眼睛。白底黑字是最容易辨認(rèn)的。最好不要使用淺灰、黃色或綠色。如果別人必須瞇著眼睛才能看清文字，那肯定是有問題的。
圖片來源：UI Design Do’s and Don’ts
2. 深灰比黑色更好
如果可以的話，嘗試使用#333333 RGB(51, 51, 51)，而不是黑色，作為文字顏色。黑白對(duì)比晃眼睛，讓人更難集中注意力。
3. 重要內(nèi)容放在前面
布局是幫助使用App或網(wǎng)站的重要信息。重要的內(nèi)容應(yīng)該是第一眼可見的，不需要縮放、滾動(dòng)或點(diǎn)擊。
圖片來源: UI Design Do’s and Don’ts
讓我們看看幾個(gè)視覺層級(jí)設(shè)計(jì)的正面實(shí)例。
Instagram（下圖左側(cè)）將讓用戶發(fā)布的圖片/視頻作為焦點(diǎn)。
Pinterest（下圖右側(cè)）的主要功能是搜索，人們?cè)谏厦鏋g覽翻找信息。
再看兩個(gè)例子。
Spotify（下圖左側(cè)）顯然把唱片封面和音樂標(biāo)題放在第一位，將用戶操作放在第二位。盡管操作是第二位，Spotify仍然保證播放暫停按鈕的比重大于前進(jìn)后退。
Facebook（下圖右側(cè)）看起與Instagram非常相似，把好友發(fā)布的內(nèi)容放到前面和中心。
4. 對(duì)齊一切
如果你感覺哪里有些不對(duì)，最快的解決方式很可能是把不對(duì)齊的東西全部對(duì)齊。有時(shí)設(shè)計(jì)師會(huì)念叨需要使用“柵格”，這其實(shí)是在提醒團(tuán)隊(duì)需要解決對(duì)齊的問題。保證元素對(duì)齊是改進(jìn)任何App或網(wǎng)站的最簡單的方法，可以立馬讓視覺效果提升10倍。
圖片來源：UI Design Do’s and Don’ts
讓我們?cè)倏纯雌渌鼘?duì)齊案例，這次是Medium。
下面是一個(gè)Medium的頁面，你覺得看起來如何？是不是有哪里不對(duì)？提示：注意左側(cè)的對(duì)齊情況，看起來怎么樣？
下圖我僅僅將內(nèi)容左側(cè)對(duì)齊了。
5. 文字尺寸和留白
我們是給人做設(shè)計(jì)的，不是給螞蟻?zhàn)龅摹Ｔ黾游淖殖叽绮⒍嗔粜┛瞻啄軌虮ＷC內(nèi)容更加易讀。
好的文字尺寸VS不好的文字尺寸：
圖片來源：UI Design Do’s and Don’ts
好的留白 VS 不好的留白：
圖片來源: UI Design Do’s and Don’ts
6. 如果順序很重要的話，使用列表
大部分移動(dòng)/網(wǎng)頁App有搜索功能，對(duì)于應(yīng)該如何展示搜索結(jié)果，可能有些爭議。
如果順序是很重要的，那么列表是最有效的。
如果順序不重要，并且還鼓勵(lì)用戶多瀏覽探索（像是Pinterest或Airbnb），那么網(wǎng)格視圖就可以提供更多的信息，方便用戶瀏覽探索。
來源：《用戶如何查看網(wǎng)格布局的搜索結(jié)果？》
7. 先做灰度設(shè)計(jì)，再上色
灰度設(shè)計(jì)能夠保證聚焦于關(guān)鍵的用戶體驗(yàn)。顏色牽扯到較多的情緒反射，并且容易打擾我們所聚焦的關(guān)鍵問題。
8. 讓設(shè)計(jì)用起來舒服
手的使用是一個(gè)重要的問題，建議參考Luke Wrobluewski的文章《Responsive Navigation: Optimizing for Touch Across Devices》
Luke畫出了手機(jī)上最容易使用的部分（對(duì)于右手來說）——我挺喜歡哪些可以設(shè)置左右手的App的。
很多高效的手機(jī)App保證導(dǎo)航和主要操作在手機(jī)的底部。
圖片來源：《Responsive Navigation: Optimizing for Touch Across Devices》
9. 借用色板
色彩是一種難以捉摸的藝術(shù)。我強(qiáng)烈推薦大家去Dribbble搜索“Color Palettes”或者使用色板編輯器，如Coolors或者Color Claim。這樣做可以節(jié)約好幾個(gè)小時(shí)的爭論、糾結(jié)的時(shí)間。
10. 使用Apple和Google的系統(tǒng)設(shè)計(jì)規(guī)范
這兩家公司都有很棒的資源幫助任何人搭建Android或iOS的App。
例如，Google的Material里有設(shè)計(jì)原則、資源、色彩、圖標(biāo)和控件，能夠幫助你快速開始App設(shè)計(jì)。
Apple則有HIG（Human Interface Guideline），里面羅列了有所有設(shè)計(jì)iOS平臺(tái)App所需要知道的東西。
圖片來源： Google Material Design和The Apple Human Interface Guidelines
記住，設(shè)計(jì)需要練習(xí)
需要一些時(shí)間和練習(xí)才能夠訓(xùn)練出一雙辨別設(shè)計(jì)的銳眼，但是你會(huì)發(fā)現(xiàn)上面的建議會(huì)大大提高你的設(shè)計(jì)。
原文：《How to not suck at design, a 5 minute guide for the non-designer》
譯者：Z Yuhan
譯者地址：https://zhuanlan.zhihu.com/p/26829116?group_id=845693825560219649
本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
孕期在家充電，學(xué)習(xí)了
我覺得自己好懶。。。
《Responsive Navigation: Optimizing for Touch Across Devices》 這篇文章很好啊
總結(jié)得很好，自己也要學(xué)習(xí)
學(xué)習(xí)了
贊一個(gè)