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