做出好設(shè)計(jì)的10條干貨技巧
本文主要針對(duì)設(shè)計(jì)初學(xué)者,沒(méi)有很深的設(shè)計(jì)理論,都是一些立馬就能用到的小技巧。
好的設(shè)計(jì)原則是可以很容易被大眾學(xué)習(xí)和實(shí)踐的。本文將介紹一些設(shè)計(jì)技巧相關(guān)的基礎(chǔ)知識(shí),看完這些 ,說(shuō)不定你今天就能用上!
如果你不確定自己適不適合做設(shè)計(jì),請(qǐng)記住大神Dave Grohl關(guān)于學(xué)習(xí)新事物的看法:
我從未學(xué)過(guò)打鼓,也從未上過(guò)吉他課,我只是想做就去做了。我認(rèn)為,如果你對(duì)某件事充滿熱情,有動(dòng)力,有專(zhuān)注力,就能做好你想做的任何事。
——Dave Grohl, Foo Fighters
記住Grohls先生的話,準(zhǔn)備好開(kāi)始今天的速成班了嗎?系好安全帶,老司機(jī)帶你飛:
1. 對(duì)比度不能太小
背景與內(nèi)容之間的對(duì)比度應(yīng)該足夠適合閱讀,以免引起眼睛疲勞。通常,白色背景下的黑色文本是最容易讀的,盡量不要用淺灰色,黃色和綠色的文字。如果你自己做完設(shè)計(jì)稿,不得不瞇著眼睛才能看清,那就肯定是有問(wèn)題了。
From: https://developer.apple.com/design/tips/
2. 深灰色比黑色要更容易閱讀
如果可以選擇,推薦使用#333333 RGB(51,51,51)而不是純黑色作為文字內(nèi)容。純黑色配上白色背景會(huì)讓眼睛產(chǎn)生視覺(jué)抖動(dòng),讓文字難以聚焦。
3. 核心內(nèi)容要突出
首頁(yè)的布局尤為重要,應(yīng)該要清楚的顯示應(yīng)用的主要功能。核心內(nèi)容應(yīng)該是顯而易見(jiàn)的,而不需要通過(guò)縮放,滾動(dòng)或點(diǎn)擊等操作才能知曉。
From: https://developer.apple.com/design/tips/
讓我們一起來(lái)看看市面上把視覺(jué)層次結(jié)構(gòu)做的比較好的例子吧。
Instagram (下圖中的左邊) 核心功能是希望用戶上傳照片/視頻;Pinterest (下圖中的右邊) 的核心功能是發(fā)現(xiàn)和搜索靈感圖片,所以把搜索放在了頂部最顯著的位置。
再看看另外2個(gè)案例:
Spotify (下面的左圖) 希望給音樂(lè)專(zhuān)輯更多的曝光,所以將播放頁(yè)面中的專(zhuān)輯封面放到最大,將播放器控件放在第二重要位置。然后在第二重要的播放器控件中再進(jìn)行重要級(jí)拆分,結(jié)合用戶的實(shí)際需求頻率,把播放和暫停放大,快進(jìn)和快退縮小。
Facebook (下面的右圖) 看起來(lái)比較像Instagram,把朋友的內(nèi)容放在了核心位置上,因?yàn)樯缃皇荈acebook的核心業(yè)務(wù)。
4. 注意對(duì)齊所有元素
當(dāng)看到一個(gè)設(shè)計(jì)不舒服的時(shí)候,首先應(yīng)該考慮到的就是對(duì)齊問(wèn)題。當(dāng)設(shè)計(jì)師們?cè)趶?qiáng)調(diào)需要使用”網(wǎng)格“體系時(shí),他們其實(shí)是在提醒團(tuán)隊(duì)注意對(duì)齊問(wèn)題。
(譯者注:新手只要把對(duì)齊這個(gè)看似簡(jiǎn)單的問(wèn)題做好,設(shè)計(jì)就能提升一個(gè)檔次!很多新人會(huì)把設(shè)計(jì)元素故意調(diào)的歪七扭八,以此體現(xiàn)他們做了設(shè)計(jì),我當(dāng)年剛?cè)腴T(mén)的時(shí)候也犯了這樣的錯(cuò)誤。實(shí)際上,有規(guī)律的東西能形成美感,對(duì)齊不是一種禁錮,而是一種好的設(shè)計(jì)方式。)
調(diào)整好對(duì)齊問(wèn)題是可以對(duì)任何網(wǎng)站或應(yīng)用設(shè)計(jì)最行之有效的優(yōu)化手段之一,只要做好了,效果能立馬好上10倍以上。
From: https://developer.apple.com/design/tips/
看看另一個(gè)對(duì)齊問(wèn)題,這個(gè)是medium的一個(gè)頁(yè)面。
這是我從Medium上找到的網(wǎng)頁(yè)布局——你覺(jué)得怎樣?(提示:注意對(duì)邊邊緣的對(duì)齊情況。)
左圖,我突出顯示了由于對(duì)齊問(wèn)題帶來(lái)的視覺(jué)流向,而在右側(cè),我只是將所有主要內(nèi)容進(jìn)行了左對(duì)齊。
左圖糟糕的對(duì)齊形式,右圖是調(diào)整后的對(duì)齊形式(點(diǎn)開(kāi)圖片可以查看大圖)
5. 把握文字的大小和間距
我們并不是為螞蟻設(shè)計(jì)的,增大文字的尺寸和間距,能夠使得內(nèi)容更容易閱讀和消化。
圖片來(lái)源: https://developer.apple.com/design/tips/
圖片來(lái)源: https://developer.apple.com/design/tips/
6. 使用合適的布局形式
大多數(shù)App或者網(wǎng)站都會(huì)用到搜索,關(guān)于如果排布具體的搜索結(jié)果一直存在一些爭(zhēng)議。
如果結(jié)果的排序很重要,那么使用列表視圖是最有效的。
如果順序無(wú)關(guān)緊要,而你希望你的應(yīng)用是鼓勵(lì)用戶去發(fā)現(xiàn)(比如Pinterest),則使用網(wǎng)格視圖更為合適。
圖片來(lái)源By C. Siu & B. Chaparro
7. 先用黑白設(shè)計(jì),后面再加顏色
使用黑白設(shè)計(jì)時(shí),能更專(zhuān)注于解決和設(shè)計(jì)應(yīng)用的核心體驗(yàn)。
而如果在做布局框架的同時(shí),加入顏色,會(huì)引起一些情感上的干擾,會(huì)打斷我們專(zhuān)注于核心問(wèn)題設(shè)計(jì)上的能力。(譯者注:先做交互,后做視覺(jué),現(xiàn)在應(yīng)該大多數(shù)都是這么個(gè)流程吧。)
8. 打造舒適的設(shè)計(jì)
關(guān)于舒適的手勢(shì)體位確實(shí)是一個(gè)需要注意到的問(wèn)題,關(guān)于這方面也有專(zhuān)門(mén)的研究文章:https://www.lukew.com/ff/entry.asp?1649
Luke列出了手機(jī)中最容易接觸和使用的區(qū)域(至少對(duì)于右手作為慣用手的人來(lái)說(shuō)),其實(shí)我希望看到應(yīng)用中有一個(gè)設(shè)置,可以讓用戶從右手界面切換到左手界面。
大部分的App都將導(dǎo)航和核心操作放在手機(jī)的底部三分之一處。
9. 善用配色板
顏色的使用一門(mén)技術(shù)活。我強(qiáng)烈推薦你在Dribbble上搜索”Color Palettes“,或者使用Coolors( https://coolors.co/) 或者 Color Claim (http://www.vanschneider.com/colors/),會(huì)有驚喜!為自己省下反復(fù)糾結(jié)的時(shí)間。
10. 使用iOS或者Google的系統(tǒng)規(guī)范
蘋(píng)果和谷歌都為開(kāi)發(fā)者提供了大量的UI組件和規(guī)范。比如:像谷歌就提供了規(guī)范、組件、配色、圖標(biāo)等等,幫助你實(shí)現(xiàn)快速設(shè)計(jì)和開(kāi)發(fā)。(譯者注:谷歌規(guī)范鏈接https://material.io/)
蘋(píng)果也提供了他們的人機(jī)交互規(guī)范,地址是 :https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/。
Various screenshots from Google Material Design and The Apple Human Interface Guidelines
最后記住,設(shè)計(jì)還需要大量的練習(xí)
提高自己的審美和設(shè)計(jì)水平需要大量的時(shí)間和練習(xí),但如果運(yùn)用好上面所寫(xiě)的一些設(shè)計(jì)技巧,會(huì)讓你在現(xiàn)在做出更好的設(shè)計(jì)。
原文:https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037
作者:Marc Hemeon
譯者: 彩云Sky,公眾號(hào):彩云譯設(shè)計(jì)
本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!