- 原文作者：Christian Miller
- 譯文出自：掘金翻譯計(jì)劃
- 譯者：Siegen
- 校對(duì)者：jiaowoyongqi,Newton
<blockquote>在設(shè)計(jì)過程中，存在的可能性越多荞雏，需要進(jìn)行的思考就越多虐秦。</blockquote>
美國(guó)心理學(xué)家 Barry Schwartz 在 The Paradox Of Choice 這本書中寫到，排除一些選擇可以大幅度的減少焦慮凤优。
最優(yōu)解不是成為一個(gè)完美主義者悦陋，而是讓最為人所贊同的決定變得可行，這可以讓我們共同創(chuàng)造出最佳體驗(yàn)别洪。
1. 限制變量
為了制作出高度精確的概念叨恨，如果我們要考慮所有潛在的變量，那將會(huì)有很多挖垛，而如果我們?cè)谠缙诰拖拗坪投x這些變量痒钝，制作過程會(huì)變得很明朗秉颗。
有了這個(gè)經(jīng)驗(yàn)，限定某些變量組之后送矩，我們預(yù)測(cè)在創(chuàng)造過程中如何產(chǎn)生幾倍的效果變得更加簡(jiǎn)單了蚕甥。
減少選擇不會(huì)導(dǎo)致獨(dú)創(chuàng)性的減少。我們假設(shè)把圍繞預(yù)先制定好的規(guī)則來創(chuàng)造概念作為一個(gè)限制栋荸，但是作為設(shè)計(jì)者我們可以創(chuàng)建我們自己的規(guī)則菇怀，完全掌控創(chuàng)造它們的過程。
尺寸與間距
UI 設(shè)計(jì)的每個(gè)方面都需要圍繞一個(gè)系統(tǒng)進(jìn)行晌块，以此來改善節(jié)奏感并在一個(gè)項(xiàng)目成長(zhǎng)的時(shí)候幫助保持尺寸與間距的一致性爱沟。一個(gè)我愛用的像這樣的系統(tǒng)是 modular scale,它可以使制定尺寸變得便利，它可以通過指定任意的比例來測(cè)量匆背、設(shè)定某個(gè)元素或者某個(gè)整體中負(fù)空間的尺寸呼伸。
一旦我們采用了某個(gè)比例，modular scale 會(huì)使得定義尺寸和間距變得更加簡(jiǎn)單钝尸。
盡管它在柵格括享，排版，垂直空間以及一個(gè)布局的綜合方面減少了變量珍促，來使這個(gè)設(shè)計(jì)達(dá)到一個(gè)易操作的層次铃辖，但是它仍然提供了令人愉悅的美感和韻律。設(shè)計(jì) UI 相當(dāng)容易猪叙。
柵格
柵格系統(tǒng)是一個(gè)絕佳的設(shè)計(jì)方法娇斩，當(dāng)把內(nèi)容實(shí)現(xiàn)成具體的 UI 界面的時(shí)候，它不僅可以對(duì)頁(yè)面內(nèi)容組織的方式加以限制沐悦，還可以簡(jiǎn)化實(shí)現(xiàn)方式成洗。但是，柵格經(jīng)常被不加思考的采用藏否，變成了一個(gè)被當(dāng)作萬金油的方案瓶殃。大多數(shù)設(shè)計(jì)師都沒有意識(shí)到，相對(duì)于使用萬金油方案副签，專門設(shè)計(jì)一款適用于你產(chǎn)品的柵格系統(tǒng)會(huì)是更好的一個(gè)方案遥椿。
柵格系統(tǒng)可以減少影響布局的變量。
這意味著理想情況下應(yīng)該提前對(duì)內(nèi)容的大致情況有一個(gè)清晰的了解淆储，以便于思考如何設(shè)計(jì)出最適合于特定內(nèi)容的柵格系統(tǒng)冠场。根據(jù)預(yù)存的資源和品牌指南來考慮商業(yè)限制，例如一個(gè)擁有具體空間規(guī)則和要求的 logo本砰，或者可能是有著具體的固定單元的廣告碴裙。
內(nèi)容的類型也是一個(gè)因素。設(shè)計(jì)時(shí)還需要考慮到內(nèi)容的不同類型，如商品包裝舔株、新聞出版物莺琳、博客或者是簡(jiǎn)單的引導(dǎo)頁(yè)，它們之間的差異十分之大载慈。要考慮到布局是以圖片為主還是以文字為主惭等。要理解 eye-scanning patterns 和它們是如何對(duì)一個(gè)視覺層次產(chǎn)生作用，這會(huì)對(duì)設(shè)計(jì)很有幫助办铡，
對(duì)商業(yè)和內(nèi)容的重要限制理解的越深刻辞做，采用柵格系統(tǒng)并作出布局決定就越容易。
字體
我覺得字體是 UI 設(shè)計(jì)最重要的方面寡具，因?yàn)樗?a target="_blank" rel="nofollow">占據(jù)了網(wǎng)頁(yè)的 95%秤茅，是信息交流的驅(qū)動(dòng)力量。
盡管像 modular scale 這樣的系統(tǒng)可以應(yīng)用在尺寸和行距上晒杈，但是字體族和風(fēng)格是被限制的嫂伞。一個(gè) UI 布局不應(yīng)該超過兩個(gè)字體類型和多個(gè)字重孔厉。規(guī)則可以拓展到如何應(yīng)對(duì)摘要和標(biāo)題拯钻。
顏色
使用調(diào)色板很容易過度用心。幾種色調(diào)就可以產(chǎn)生一個(gè)充足并且一致的視覺效果撰豺。通常在一開始我們有 5 種色卡就夠了粪般。
諸如 Adobe Color CC 之類的工具可以使預(yù)定義一個(gè)調(diào)色板變得非常容易。
大部分品牌應(yīng)該采用了一個(gè)主要的或者重要的顏色以及一些中立的或者差異的色調(diào)來實(shí)現(xiàn)污桦。一開始的時(shí)候亩歹，界面中并不需要用到 15 種不同明度的顏色。最佳的做法應(yīng)該是從單一的明度起步然后逐步增加更多不同的明度凡橱。
圖片
我們?nèi)绾伟褕D片插入到 UI 中在很大程度上是由內(nèi)容的上下文所決定的小作。如果我們對(duì)那個(gè)有一個(gè)大致的了解，我們可以為我們的圖片創(chuàng)建一個(gè)起始點(diǎn)稼钩，這些圖片有著比例顾稀，尺寸，形狀和論述等等的變量坝撑。我們可能會(huì)發(fā)現(xiàn)我們不需要那么多静秆。
限制我們圖片的變量可以強(qiáng)制的獲得更好的一致性，并且使得在長(zhǎng)期過程中管理圖片資源變得更加容易巡李。這對(duì)標(biāo)志來說也是一樣抚笔。
對(duì)于圖片的比例和尺寸我們確實(shí)需要的有多少變量？
2. 盡早的創(chuàng)建一個(gè)風(fēng)格指南
作為一個(gè)概念上的 UI 項(xiàng)目侨拦，創(chuàng)建和維護(hù)一個(gè)風(fēng)格指南或者模式庫(kù)變得越來越重要殊橙。這將建立設(shè)計(jì)準(zhǔn)則來幫助項(xiàng)目擴(kuò)展，維護(hù)節(jié)奏感和一致性。如果我們正在事先定義變量膨蛮，為它們寫文檔是一個(gè)好的方法螃概。相比于沒有文檔來說，擁有一份文檔在未來進(jìn)行決策的時(shí)候會(huì)更加容易鸽疾。
根據(jù)項(xiàng)目的情況吊洼，有時(shí)候創(chuàng)建一個(gè)風(fēng)格指南是一件奢侈的事，經(jīng)常需要依據(jù)未來的計(jì)劃進(jìn)行改動(dòng)制肮。這也是為什么大部分風(fēng)格指南都在最后一分鐘或者是在項(xiàng)目完成后才準(zhǔn)備好冒窍，當(dāng)然這仍然是個(gè)好習(xí)慣。但是對(duì)于風(fēng)格指南來說有著大量致力于預(yù)期設(shè)計(jì)和發(fā)展的主張和論證豺鼻，它可以為早期概念化打好堅(jiān)實(shí)基礎(chǔ)提供幫助综液。
在開始的時(shí)候正確創(chuàng)建一個(gè)基本的風(fēng)格指南不僅可以早早建立原則來減少設(shè)計(jì)抉擇，還可以作為一個(gè)基礎(chǔ)設(shè)施幫助參與和添加主要的內(nèi)容儒飒。
在開始的時(shí)候制作一個(gè)東西不意味著它需要是完整的——可以差的很遠(yuǎn)谬莹。這些風(fēng)格在早期總是會(huì)演變出許多的可能性，一個(gè)項(xiàng)目變得越大桩了，它的邊界也就越清晰越嚴(yán)謹(jǐn)附帽。
3. 基于模塊的優(yōu)先級(jí)和適應(yīng)性
在基于模塊的設(shè)計(jì)系統(tǒng)中，例如 Brad Frost 的原子設(shè)計(jì)井誉，布局可以在具體的關(guān)鍵區(qū)域外進(jìn)行制定蕉扮。模塊可以在各種各樣的布局里面重復(fù)使用。界面被當(dāng)作系統(tǒng)對(duì)待而不是頁(yè)面颗圣，使用基于模式的設(shè)計(jì)和部署是進(jìn)程中的一個(gè)重要環(huán)節(jié)喳钟。
這是一個(gè)很好的方法，它使得 UI 設(shè)計(jì)更加容易管理在岂，但是為了使它更加有效率我們不得不優(yōu)先考慮關(guān)鍵區(qū)域奔则，并讓關(guān)鍵區(qū)域周圍的所有內(nèi)容去適應(yīng)它們。這樣將會(huì)相應(yīng)的確定視覺連貫性蔽午。
確定關(guān)鍵區(qū)域
我們的設(shè)計(jì)應(yīng)該圍繞重要的部分進(jìn)行易茬。每個(gè)區(qū)域的優(yōu)先級(jí)是由它在界面內(nèi)的內(nèi)容或者功能所決定的，這是這個(gè)問題基本答案祠丝。
通過首先聚焦于重要的區(qū)域疾呻，我們正在減少此后的設(shè)計(jì)抉擇，因?yàn)殡S后的區(qū)域不得不進(jìn)行變通來適應(yīng)已經(jīng)建立的周圍內(nèi)容写半。
聚焦于關(guān)鍵區(qū)域
一旦高優(yōu)先級(jí)的區(qū)域已經(jīng)被確定下來岸蜗，對(duì)于這些關(guān)鍵的區(qū)域需要高度關(guān)注并且將它們完成。這個(gè)觀點(diǎn)主要是指叠蝇，在適應(yīng)次要區(qū)域之前璃岳，我們需要確保它們是簡(jiǎn)單可用并且符合所有的要求的。
4. 讓它為每個(gè)人工作
幾千年來設(shè)計(jì)師們都一直盡力做一件事——高效的溝通。我們持續(xù)不斷地在視覺和聽覺方面铃慷，迭代重構(gòu)一個(gè)對(duì)于用戶而言更為友好的溝通方式单芜。
隨著我們從廣闊的潛在用戶群不斷的獲得信息，為了從中得到盡可能多類型的人群信息犁柜，優(yōu)化獲取方式變得迫在眉睫洲鸠。
無障礙使用是一件因禍得福的事情
迎合更廣泛的用戶聽起來意味著更多的工作，把無障礙使用視作為革新的障礙是很誘人的馋缅。但是扒腕，遵循最新的標(biāo)準(zhǔn)會(huì)是件因禍得福的事，尤其是如果它們已經(jīng)成為習(xí)慣了萤悴。
在設(shè)計(jì)期間的例子包括一系列的要求——我們需要一個(gè)最小的字體尺寸用在文本主體瘾腰，或者是正文和背景資料之間的一些有意義的差異，或者是觸摸設(shè)備上更大的鏈接區(qū)域覆履。
這不僅僅是關(guān)于殘障人士的蹋盆。
無障礙使用不僅僅是為了服務(wù)殘障人士，一些人可能會(huì)這樣暗示硝全，但其實(shí)也是服務(wù)于那些用著老式設(shè)備和瀏覽器的用戶栖雾，他們的設(shè)備往往無法支持所有的最新特效和提升。意識(shí)到這些標(biāo)準(zhǔn)并且遵守它們將會(huì)很自然的減少設(shè)計(jì)抉擇柳沙。
5. 使用經(jīng)過考驗(yàn)和測(cè)試的模式
事實(shí)是岩灭，當(dāng)用戶遵循數(shù)百個(gè)普遍的設(shè)計(jì)模式的時(shí)候，這些設(shè)計(jì)模式他們已經(jīng)從多年的使用和了解過程中完全吸收了赂鲤，所以現(xiàn)在用戶憑借直覺發(fā)現(xiàn)界面。一旦我們開始打破傳統(tǒng)模式并且發(fā)展新的趨勢(shì)柱恤，我們會(huì)發(fā)現(xiàn)讓一種新模式完全變成用戶的直覺會(huì)花費(fèi)大量的時(shí)間数初。
制作原創(chuàng)的 UI 模式是可行的，但是我們不應(yīng)該對(duì)常見的方式心懷顧忌——畢竟它們的成功是有理由的梗顺。
少考慮重新創(chuàng)造泡孩，聚焦于美感是我們的一線希望∷掳基于已建立的模式進(jìn)行原創(chuàng)的工作仍然是可行的仑鸥。
對(duì)于成功的設(shè)計(jì)模式我們了解和融入的越多，作為設(shè)計(jì)師我們需要做的選擇就越少变屁。我們不需要考慮什么可能會(huì)起作用眼俊，轉(zhuǎn)而去考慮什么將會(huì)起作用。
最后的注意事項(xiàng)
對(duì)于這些方法中的一部分方法來說粟关，單獨(dú)使用可能對(duì)于減少我們的思考量和抉擇幫助不大疮胖，或者說無法大幅度的改善我們的設(shè)計(jì)。但是把它們合并在一起，持續(xù)獲取好的反饋澎灸，可以使得設(shè)計(jì)更好 UI 的這件事變得相當(dāng)容易院塞。
