這篇譯文來自Invision團(tuán)隊免費提供的系列課程：設(shè)計師如何與開發(fā)者合作党晋。之前的譯文請查看：
設(shè)計師如何與開發(fā)者合作（一）：什么是為開發(fā)而設(shè)計刷喜？
設(shè)計是如何與開發(fā)者合作（二）：從哪里開始？需要詢問開發(fā)者的問題
設(shè)計師如何與開發(fā)者合作（三）：加強團(tuán)隊協(xié)作：需要詢問開發(fā)者的問題2
一致性對用戶和開發(fā)者都很重要
設(shè)計既是藝術(shù)與科學(xué)的結(jié)合體小腊。你在這兩方面都很擅長的話伏尼，你創(chuàng)造的產(chǎn)品就會更為優(yōu)秀脖旱。
有很多辦法提升你在藝術(shù)方面的技能。今天我們要談?wù)摰氖侨绾翁岣呔W(wǎng)頁設(shè)計的科學(xué)性介蛉。
維基百科將科學(xué)定義為“調(diào)查現(xiàn)象萌庆，獲取新知識或者糾正整合已存在知識的結(jié)合體”。同時“用術(shù)語描科學(xué)币旧，它是一種基于經(jīng)驗或者可測量的數(shù)據(jù)践险，受到具體的推理原則的約束的調(diào)查方法”
從“科學(xué)地設(shè)計網(wǎng)頁”這個角度來說，我們需要經(jīng)常詢問這個問題：為什么要反對已經(jīng)被公認(rèn)為有效的原則吹菱？
這樣聽起來很難理解巍虫，讓我舉例說明一下。
開發(fā)UI時鳍刷，你需要根據(jù)你所屬的產(chǎn)品的生態(tài)系統(tǒng)下的一些基本規(guī)則來做出設(shè)計決策占遥。這些規(guī)則可以基于已經(jīng)建立的通用法則或產(chǎn)品在開發(fā)過程中的最佳實踐方法來建立∈涔希或者你可以作為架構(gòu)師來構(gòu)建它們瓦胎。
比如，在UI設(shè)計中尤揣，圖標(biāo)往往有其約定俗成的含義凛捏。比如下面這組圖標(biāo)，你一看就知道是什么意思芹缔。
你所做的任何設(shè)計決策最欠，都應(yīng)該像你選擇使用何種icon時那樣示罗，根據(jù)現(xiàn)在已經(jīng)存在的某種聯(lián)系來決定。
你的產(chǎn)品生態(tài)系統(tǒng)中可能有許許多多的規(guī)則或原則芝硬。某種特定的顏色在產(chǎn)品中代表什么意思蚜点？是否有自定義圖標(biāo)庫？在某些行為發(fā)生后需要設(shè)計什么動畫拌阴？這些都是你需要為你的產(chǎn)品設(shè)定的規(guī)則绍绘。
交給你一個挑戰(zhàn)：努力為你的產(chǎn)品創(chuàng)定規(guī)則。
在你設(shè)計的時候迟赃，不斷地交叉檢查這些規(guī)則陪拘。并且對你之前設(shè)計的內(nèi)容進(jìn)行規(guī)則檢查，看看有什么不一致的地方纤壁。
不斷問自己一個問題“我為什么要這樣做左刽？”
比如：
-為什么我使用雙箭頭來表示下一張幻燈片？我有沒有在某些地方改用了單箭頭酌媒？這些行為一致嗎欠痴？
-為什么這個控件的邊框描邊是10px?我有沒有在別的空間上使用不同的描邊數(shù)值迄靠？我需要兩種不同的數(shù)值嗎？還是說我最好統(tǒng)一一下喇辽？
-為什么這個副標(biāo)題我用的是17px?我有沒有在類似的地方用18px?我真的需要擁有17px和18px兩種規(guī)格嗎掌挚？
-為什么在類似的情況下，我這里的間隔設(shè)為10px菩咨，那里的間隔卻設(shè)成了20px?我有一個關(guān)于元素間隔的規(guī)則嗎吠式？
-為什么我的這個側(cè)邊欄的背景用了灰色遮罩？在類似的情況下旦委，我用的是一樣的遮罩嗎？
記壮恰：不斷問自己為什么缨硝。
程序員是非常注重邏輯的。如果你給他們的交付物違反了某些規(guī)則（不關(guān)你是有意還是無意的）罢低，他們要么會給你打電話查辩，要么會編寫本不必要的代碼。這兩種情況都是在浪費時間网持。
你也許會想，如果我要不斷質(zhì)疑自己做的東西功舀，那我會喪失想象力并且最終打斷我的設(shè)計過程萍倡。
這并不會讓你束手束腳，相反辟汰，它可以幫助你找出可以適用于某一類情況的元素的最好方式列敲。
同時要記住，你不應(yīng)該嘗試一次定義所有的規(guī)則帖汞。
事實上戴而，這并沒有改變你的設(shè)計過程。如果你的工作流程是在ps中先設(shè)計好一個主頁翩蘸，再根據(jù)它設(shè)定內(nèi)頁的外觀所意，那是沒什么問題的。
當(dāng)你急需工作的時候催首，你需要開始比較扶踊，你現(xiàn)在的工作是否和之前的頁面的元素相一致？問上面我列出的那些問題或類似的問題郎任。這可以讓你的設(shè)計自動地幫你制定規(guī)則姻檀。
你不需要一開始就知道你想要每個段落都有一個20px的下邊距，但是當(dāng)你發(fā)現(xiàn)這種設(shè)置在多個條件下都能呈現(xiàn)很好的效果時涝滴，那就把它變成規(guī)則⌒灏妫現(xiàn)在你已經(jīng)知道有這么一條規(guī)則了胶台，帶著它審視所有的頁面器贩，確保它們都遵循了這個規(guī)則损搬。并且在以后的類似情境下使用這個規(guī)則渐夸。
看到了嗎某宪？設(shè)計并不難卧蜓。
利用設(shè)計規(guī)范（Style guide）來組織你的設(shè)計
設(shè)計規(guī)范可以幫助你方便地使用規(guī)則酣胀。有許多不同的辦法制定設(shè)計規(guī)范.但不管怎么說功炮，它們都至少包含顏色慕匠，字體杭朱，控件等將在整個設(shè)計過程中重復(fù)使用的元素阅仔。
我通常會深入挖掘設(shè)計規(guī)范,多寫一些元素的簡要說明。這可以幫助我回答“我為什么要在這里使用這個特殊元素呢”弧械。并且保持一致性八酒。
設(shè)計規(guī)范也可以運用于設(shè)計軟件中。在sketch中刃唐，你可以為元素創(chuàng)建范例并重復(fù)使用羞迷。
編碼中有個詞叫DRY（Don't Repeat Yourself），意思是不要重復(fù)你自己画饥。用到這里也是合適的衔瓮。你已經(jīng)創(chuàng)建好了你想要的側(cè)邊欄樣式，背景抖甘，顏色热鞍，邊框，陰影衔彻，文字都已經(jīng)完美了碍现，為什么還要以后再設(shè)置一次呢？你只要將這些信息簡化為一個符號或?qū)ο髽邮矫准椋瑑Υ嫦聛碇缃樱院缶涂梢灾貜?fù)用了。
搞清楚你的規(guī)則并重復(fù)使用他們悴晰，這將大大加快你的設(shè)計過程慢睡。
規(guī)則與一致性帶來的好處
在本節(jié)中，我們一直在談?wù)摽茖W(xué)和邏輯背后的設(shè)計铡溪。這些東西本質(zhì)上是為了保持代碼的簡潔清晰和幫助開發(fā)者減小工作量漂辐。從長遠(yuǎn)來看，這些工作最終會幫助提升用于體驗棕硫。
不管我們是否意識到這一點髓涯，作為人類，我們總是習(xí)慣于對系統(tǒng)和一致性作出回應(yīng)哈扮。
對用戶而言纬纪，一個規(guī)則嚴(yán)謹(jǐn)并且一致性強的網(wǎng)站會比一個結(jié)構(gòu)隨意的網(wǎng)站體驗更好蚓再。用戶雖然意識不到這些規(guī)則和一致性的存在，但是他們會不自覺地受到影響包各。
你也聽說過客戶想要一個“專業(yè)”且“干凈”的設(shè)計吧摘仅？這正是規(guī)則與一致性能夠帶來的感受。
在設(shè)計過程中時刻想著規(guī)則——它們是為開發(fā)而設(shè)計的基石之一问畅。沒有什么能比規(guī)則更能同時提升用戶體驗與基礎(chǔ)代碼了娃属。在下個項目中努力嘗試這樣做，你會得到很大的成長护姆。
小結(jié)
-讓你的設(shè)計更有邏輯
-定義一組你所使用的的元素和模式的規(guī)則矾端，并在整個網(wǎng)站的設(shè)計中貫穿他們。
-當(dāng)你在設(shè)計過程中定義這些規(guī)則時卵皂，記得回過頭來看看之前已完成的頁面有沒有符合新的規(guī)則秩铆。
-不斷問自己：“為什么我這樣設(shè)計？”從而避免在相似的情境下使用兩種不同的設(shè)計
-創(chuàng)建設(shè)計規(guī)范來組織你的規(guī)則渐裂。
-從心里認(rèn)同豺旬，在一致性上花費的苦功最終會提升整個用戶體驗和代碼庫钠惩。
