2021-6-17 資深UI設(shè)計(jì)者
編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在日常工作中經(jīng)常與其他同事有些分歧，比如產(chǎn)品不理解你的設(shè)計(jì)，覺(jué)得頁(yè)面不夠好看等等，那到底什么樣的設(shè)計(jì)叫做好設(shè)計(jì)呢？本文作者分享了關(guān)于“好設(shè)計(jì)”的定義以及分析，我們一起來(lái)了解一下。
有同學(xué)問(wèn)我，說(shuō)做設(shè)計(jì)好難，領(lǐng)導(dǎo)和產(chǎn)品不懂設(shè)計(jì)，每次給看設(shè)計(jì)，都說(shuō)覺(jué)得丑，改了受氣，不改又說(shuō)態(tài)度不行，那么到底什么是好設(shè)計(jì)。今天和大家聊聊到底什么是好設(shè)計(jì)？希望這篇文章可以幫到你。
做設(shè)計(jì)這么久，我們先來(lái)看看什么是好的設(shè)計(jì)？好的設(shè)計(jì)到底是如何定義的。
▲一組無(wú)印良品海報(bào)獲得了由日本平面最高獎(jiǎng)項(xiàng)——龜倉(cāng)雄策獎(jiǎng)，被譽(yù)為日本設(shè)計(jì)界的「奧斯卡終身成就獎(jiǎng)」，代表著日本平面設(shè)計(jì)的最高水平。畫(huà)面僅用色彩和幾何圖形的結(jié)合，完美構(gòu)成了人在自然中露營(yíng)的和諧場(chǎng)景。
▲可以看到海報(bào)中有湖泊、藍(lán)天、山脈、森林和露營(yíng)帳篷，而整個(gè)視覺(jué)效果是用廢紙板制作表現(xiàn)出來(lái)的，可以說(shuō)非常有創(chuàng)意了。同時(shí)和整個(gè)商業(yè)很好的結(jié)合起來(lái)。
每年德國(guó)舉行的紅點(diǎn)設(shè)計(jì)大獎(jiǎng)，有「設(shè)計(jì)界的奧斯卡」的美譽(yù)，是全球工業(yè)設(shè)計(jì)和發(fā)展趨勢(shì)的風(fēng)向標(biāo)。
▲德國(guó)的紅點(diǎn)設(shè)計(jì)也是讓全球設(shè)計(jì)師狂熱的獎(jiǎng)項(xiàng)，徠卡相機(jī)除了價(jià)格昂貴，在設(shè)計(jì)上也是獨(dú)具匠心，獲得過(guò)很多設(shè)計(jì)大獎(jiǎng)，非常有代表性的大獎(jiǎng)設(shè)計(jì)，同時(shí)商業(yè)上也很成功。
▲自2015年發(fā)布以來(lái)，Apple Watch已經(jīng)成為生活中必不可少的電子設(shè)備，獲得了無(wú)數(shù)設(shè)計(jì)大獎(jiǎng)。
▲除了工業(yè)設(shè)計(jì)，韓國(guó)我很喜歡的設(shè)計(jì)公司Plusx也獲得過(guò)很多紅點(diǎn)設(shè)計(jì)大獎(jiǎng)。
所以判斷一個(gè)設(shè)計(jì)是不是好的設(shè)計(jì)或者商業(yè)設(shè)計(jì)，獲得過(guò)大獎(jiǎng)是很重要的一個(gè)評(píng)判標(biāo)準(zhǔn)。
在眾多設(shè)計(jì)準(zhǔn)則中，其中特別受廣泛推崇的是Dieter Rams）所定義的“好設(shè)計(jì)的10個(gè)原則， 也即德國(guó)博朗公司設(shè)計(jì)十項(xiàng)原則。
1）Good design is innovative
好的設(shè)計(jì)是創(chuàng)新的
▲日本設(shè)計(jì)大師深澤直人設(shè)計(jì)的這把傘，在傘柄彎曲的地方有一個(gè)小凹槽。當(dāng)你在雨天去超市買(mǎi)完?yáng)|西，提著袋子去乘公交車(chē)或者地鐵的時(shí)候，這個(gè)凹槽剛好可以在你站著的時(shí)候?yàn)槟愠洚?dāng)一個(gè)掛鉤的角色。這個(gè)設(shè)計(jì)非常自然又貼心，又有創(chuàng)新。
2）Good design is aesthetic
好的設(shè)計(jì)是美的
▲產(chǎn)品的美感是實(shí)用性不可或缺的一部分，因?yàn)槊刻焓褂玫漠a(chǎn)品都無(wú)時(shí)無(wú)刻的影響著人類(lèi)和我們的生活。但是只有精湛的東西才可能是美的。比如蘋(píng)果iMac的設(shè)計(jì)，無(wú)論從第一代的半透明，到今天的超薄，無(wú)不是完美的設(shè)計(jì)，在各種電影，MV里，即使遮住了蘋(píng)果的LOGO你也知道是蘋(píng)果的產(chǎn)品。
3）Good design makes a product understandable
好的設(shè)計(jì)是易懂的
▲好的設(shè)計(jì)自己會(huì)說(shuō)話，簡(jiǎn)單易懂，比如無(wú)印良品這個(gè)CD機(jī)，即使是老人和小朋友都會(huì)使用。
4）Good design is unobtrusive
好的設(shè)計(jì)是克制的
▲很喜歡張小龍對(duì)微信的設(shè)計(jì)理念定義，克制帶有約束的，就從微信開(kāi)屏來(lái)說(shuō)，其它是APP早已經(jīng)商業(yè)化了，而微信的開(kāi)屏多年如一日。
5）Good design is honest
好的設(shè)計(jì)是誠(chéng)實(shí)的
▲不會(huì)故意夸大產(chǎn)品的價(jià)值，而是強(qiáng)調(diào)功能本身，也不會(huì)去欺騙消費(fèi)者。比如現(xiàn)在很多廣告，特別電商里面，比如我經(jīng)常買(mǎi)的這款牛奶，從廣告點(diǎn)進(jìn)去第二件0元，興沖沖的加入購(gòu)物車(chē)，發(fā)現(xiàn)還是原價(jià)。
6）Good design makes a product useful
好的設(shè)計(jì)是實(shí)用的
▲無(wú)論APP也好，還是工業(yè)產(chǎn)品設(shè)計(jì)也好，都是用來(lái)用的，必須滿足基本的功能，好的設(shè)計(jì)會(huì)去強(qiáng)調(diào)實(shí)用性的同時(shí)也不會(huì)忽略細(xì)節(jié)，比如無(wú)印良品這個(gè)電飯煲外形圓圓的很可愛(ài)，同時(shí)還很多貼心細(xì)節(jié)，比如有凹槽放飯勺等等。
7）Good design is long-lasting
好的設(shè)計(jì)是經(jīng)得起歲月的考驗(yàn)
▲這些產(chǎn)品或許隨著時(shí)代發(fā)展消失了，但是它們的設(shè)計(jì)永遠(yuǎn)不會(huì)過(guò)時(shí)，和設(shè)計(jì)趨勢(shì)不同，它會(huì)成為一種文化，一種理念，博朗和蘋(píng)果早期的作品在今天看來(lái)也是經(jīng)典。
8）Good design is thorough down to the last detail
好的設(shè)計(jì)是考慮周到并且不放過(guò)每個(gè)細(xì)節(jié)的
很多產(chǎn)品的設(shè)計(jì)，很容易在用戶關(guān)注地方做的很好，在用戶忽略地方做的很粗糙，就好比我們?nèi)チ艘粋€(gè)商場(chǎng)，一樓都是各種名牌，高大上，但是去了洗手間，去無(wú)法下腳；這種體驗(yàn)估計(jì)用戶不會(huì)再去第二次，所以極致的設(shè)計(jì)不會(huì)放過(guò)每一個(gè)角落。
9）Good design is environmentally friendly
好的設(shè)計(jì)是環(huán)保的
▲瑞典品牌freitag，以卡車(chē)車(chē)篷為材料的袋包作為材質(zhì)，具有獨(dú)特的二手感，以及獨(dú)一無(wú)二的花樣及顏色，設(shè)計(jì)好用同時(shí)兼具環(huán)保。
10）Good design is as little design as possible
好的設(shè)計(jì)是盡量少的設(shè)計(jì)
▲簡(jiǎn)潔，并不是簡(jiǎn)單，因?yàn)樗鼭饪s了產(chǎn)品所必須的具備因素，剔除了不必要的東西?！按蟮乐梁?jiǎn)，平淡為歸”比如圖中這個(gè)時(shí)鐘設(shè)計(jì)，兼具美和實(shí)用，同時(shí)沒(méi)有一個(gè)多余的設(shè)計(jì)。
另外很重要一點(diǎn)，什么是好的商業(yè)設(shè)計(jì)，就是好用而且市場(chǎng)反饋好，用戶好評(píng)多，比如蘋(píng)果系列產(chǎn)品，設(shè)計(jì)本身獲得很多大獎(jiǎng)，同時(shí)商業(yè)價(jià)值好，銷(xiāo)量很高。
同理還有戴森的產(chǎn)品，以黑科技為賣(mài)點(diǎn)，無(wú)論推出的吹風(fēng)機(jī)，還是卷發(fā)棒都銷(xiāo)量非常的高，所以好的商業(yè)設(shè)計(jì)需要具備上述所說(shuō)。
了解了好的設(shè)計(jì)標(biāo)準(zhǔn)，回歸到產(chǎn)品設(shè)計(jì)，那么什么決定視覺(jué)設(shè)計(jì)的標(biāo)準(zhǔn)呢，UI設(shè)計(jì)的標(biāo)準(zhǔn)又是什么呢，UI設(shè)計(jì)視覺(jué)元素有木有對(duì)應(yīng)的表達(dá)標(biāo)準(zhǔn)。
特別是在一些大公司，每個(gè)設(shè)計(jì)師的視覺(jué)表達(dá)手法是不一樣的，那么有哪些統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)么，在我認(rèn)為一共有以下這幾個(gè)設(shè)計(jì)標(biāo)準(zhǔn)：
1）PC網(wǎng)格
網(wǎng)格的重要性就不再詳細(xì)說(shuō)，谷歌，微軟，蘋(píng)果，Naver，阿里都將網(wǎng)格系統(tǒng)作為設(shè)計(jì)的標(biāo)準(zhǔn)。明確網(wǎng)格系統(tǒng)，它是設(shè)計(jì)指南里非常重要的一部分，當(dāng)然網(wǎng)格也不是絕對(duì)的，也是可以在基礎(chǔ)上變化。
通常，在Web設(shè)計(jì)中一般采用12列作為網(wǎng)格標(biāo)準(zhǔn)，因?yàn)?2列可以輕松的分成6列，4列，3列和2列。
▲PC中12欄網(wǎng)格運(yùn)用案例，整個(gè)頁(yè)面會(huì)更加統(tǒng)一和標(biāo)準(zhǔn)化，有規(guī)律可循。
▲網(wǎng)格是很多公司建立標(biāo)準(zhǔn)的準(zhǔn)則，特別是響應(yīng)式設(shè)計(jì)運(yùn)用上。
▲reddit的官網(wǎng)設(shè)計(jì)也是采用的12欄設(shè)計(jì)，很好的將頁(yè)面進(jìn)行布局。所以如果你做網(wǎng)頁(yè)或者PC設(shè)計(jì)，網(wǎng)格一定是一個(gè)好設(shè)計(jì)的基礎(chǔ)準(zhǔn)則。
2）移動(dòng)網(wǎng)格
移動(dòng)端一般采用6列網(wǎng)格，因?yàn)榇蠖鄶?shù)產(chǎn)品6列就足夠了。6列在頁(yè)面中也很容易3等分或者2等分，6列也是比較常用的一些布局方式。當(dāng)然也要看場(chǎng)景像淘寶，電商可能需要12列，因?yàn)轫?yè)面密度太高了。
▲Pin的界面網(wǎng)格系統(tǒng)，可以看出它們是運(yùn)用一個(gè)6列網(wǎng)格系統(tǒng)，所有的圖片各占3列，按鈕占六列，每個(gè)頁(yè)面的左右邊距相同。
▲airbnb采用的左右邊距48，中間24的網(wǎng)格系統(tǒng)，可以看出這套柵格系統(tǒng)留白會(huì)比較多，所以我們?cè)跒g覽airbnb的設(shè)計(jì)時(shí)候會(huì)發(fā)現(xiàn)他們頁(yè)面會(huì)非常舒服原因也是如此，airbnb設(shè)計(jì)和體驗(yàn)都非常棒。
我們?cè)賮?lái)看看被稱(chēng)為規(guī)范鼻祖的谷歌在最新的設(shè)計(jì)語(yǔ)言中，第一次把柵格系統(tǒng)提出來(lái)講，谷歌的產(chǎn)品覆蓋手機(jī)，web，以及平板，那么谷歌是如何去用柵格系統(tǒng)來(lái)定義它們產(chǎn)品體系呢？
▲谷歌的柵格系統(tǒng)除了傳統(tǒng)的邊距和水槽，內(nèi)容區(qū)域外，同時(shí)也定義了4欄，可以看出谷歌也是第一次重點(diǎn)來(lái)講解他們的網(wǎng)格系統(tǒng)。
比例關(guān)系非常重要，可能同樣的內(nèi)容，合理的比例和不合理看起來(lái)會(huì)相差甚遠(yuǎn)。所以好的合理比例準(zhǔn)則也是衡量一個(gè)設(shè)計(jì)好壞的重要標(biāo)準(zhǔn)。
說(shuō)道比例不得不提黃金比例，是由幾何學(xué)的創(chuàng)始人Euclied定義的，大概在公元前300年前。黃金比例值是1.618，但是也有人質(zhì)疑說(shuō)，這里比例不是絕對(duì)。用黃金比例作為設(shè)計(jì)依據(jù)不合理。我的觀點(diǎn)是，黃金比例可以當(dāng)做設(shè)計(jì)參加的基礎(chǔ)，但不是絕對(duì)的數(shù)字。
▲蘋(píng)果設(shè)計(jì)中，運(yùn)用黃金比例作為整個(gè)APP圖標(biāo)的設(shè)計(jì)準(zhǔn)則，在蘋(píng)果很多設(shè)計(jì)中都可以看見(jiàn)這種比例的運(yùn)用。
▲還有很多知名互聯(lián)網(wǎng)公司的品牌設(shè)計(jì)都運(yùn)用著黃金比例。
▲Facebook的官網(wǎng)設(shè)計(jì)比例，也是采用的接近黃金比例作為布局方式。
▲谷歌的material規(guī)范中有講到，如何定義布局。統(tǒng)一按照標(biāo)準(zhǔn)的比例16：9，3：2，4：3，1：1，3：4，2：3等標(biāo)準(zhǔn)的比例去做設(shè)計(jì)布局，來(lái)統(tǒng)一整個(gè)設(shè)計(jì)。
所以，好的比例規(guī)則規(guī)范，是設(shè)計(jì)中非常重要的。我們的設(shè)計(jì)都應(yīng)該遵循這種有規(guī)律的比例。
產(chǎn)品設(shè)計(jì)中，文字信息節(jié)奏處理非常重要。我們應(yīng)該通過(guò)各種手段去提升文字的易讀性。
1）通過(guò)對(duì)齊方式提升易讀
▲上圖是一個(gè)簡(jiǎn)單的示范，3種不同的閱讀感受，如果閱讀節(jié)奏沒(méi)有做好，沒(méi)有對(duì)齊，那么閱讀效率就會(huì)變的低下，我們來(lái)看看上圖用戶是如何閱讀的。
▲拆解上面的方案，你會(huì)發(fā)現(xiàn)不同的排版，用戶看的方式就不一樣，如果你間距過(guò)小，用戶就很難閱讀。間距過(guò)大也會(huì)出現(xiàn)難以閱讀，所以必須在合理的比例下面設(shè)計(jì)的閱讀性才會(huì)更好。
2）通過(guò)文字大小提升易用性
▲大多數(shù)信息都是由標(biāo)題，副標(biāo)題，正文組成。所以在組織信息的時(shí)候，可以通過(guò)文字大小，字體粗細(xì)來(lái)加強(qiáng)信息閱讀。蘋(píng)果還把黃金比例用于字體上。每個(gè)字體大小的對(duì)比都是1.7和0.7左右對(duì)比，非常接近黃金比例。
3）通過(guò)對(duì)比提升易用性
▲運(yùn)用對(duì)比也是提升易用性經(jīng)常用到的手段，比如通過(guò)文字大小對(duì)比，文字的透明度對(duì)比。但是要注意互聯(lián)網(wǎng)的文字的可訪問(wèn)性，推薦使用web無(wú)障礙標(biāo)準(zhǔn)4.5:1
▲蘋(píng)果的官網(wǎng)設(shè)計(jì)，就是將文字信息運(yùn)用到極致，如上圖通過(guò)文字大小，文字顏色，文字透明度等方式，讓信息閱讀起來(lái)更加流暢。
關(guān)于設(shè)計(jì)的準(zhǔn)則有很多，設(shè)計(jì)的準(zhǔn)則目的是讓我們的設(shè)計(jì)更加和諧，它是一個(gè)參考標(biāo)準(zhǔn)，但是又不是絕對(duì)的，你可以理解為它是一把尺子，這把尺子是保證設(shè)計(jì)有一個(gè)基礎(chǔ)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn