這本書(shū)通過(guò)簡(jiǎn)潔明了的語(yǔ)言弦撩、通俗易懂的示例，將優(yōu)秀設(shè)計(jì)通用的原則總結(jié)歸納為四點(diǎn)：親密性论皆、對(duì)齊益楼、重復(fù)、對(duì)比点晴。適合所有能夠進(jìn)行基礎(chǔ)閱讀的人學(xué)習(xí)感凤，跟書(shū)名非常貼切。

（圖0）《寫(xiě)給大家看的設(shè)計(jì)書(shū)》

當(dāng)我把這本書(shū)推薦給產(chǎn)品組的開(kāi)發(fā)人員時(shí)粒督，得到的反饋是：示例都是印刷品設(shè)計(jì)陪竿，跟移動(dòng)開(kāi)發(fā)沒(méi)有半毛錢(qián)關(guān)系。orz,這背后的愛(ài)恨情仇屠橄，如果展開(kāi)則實(shí)在沒(méi)有必要族跛，否則將是通篇的吐槽闰挡。所以下面將這本書(shū)的描述語(yǔ)言、示范案例進(jìn)行移動(dòng)端界面的轉(zhuǎn)化礁哄。

親密性：將界面中相關(guān)的元素組織在一起长酗，成為一個(gè)組，讓它們不被視作一堆散亂且彼此無(wú)關(guān)的片段桐绒。

如果微信的信息列表頁(yè)面夺脾，每一項(xiàng)的名稱、時(shí)間茉继、摘要只是樣式區(qū)別卻未經(jīng)組織咧叭，就會(huì)變得不那么容易閱讀，如下（圖1）馒疹。尤其在列表項(xiàng)很多的時(shí)候佳簸，將擁擠不堪，讓人窒息颖变。

（圖1）如果微信的信息列表長(zhǎng)成這樣生均，肯定不會(huì)有現(xiàn)在的用戶量

實(shí)際的處理方式僅僅是采用了合理的列表項(xiàng)間距，以及每一項(xiàng)當(dāng)中名稱腥刹、時(shí)間马胧、摘要的分布距離，就能輕松區(qū)分出列表項(xiàng)衔峰、每一項(xiàng)中內(nèi)容的關(guān)系佩脊。秩序井然，符合邏輯垫卤，保證了良好的可讀性威彰。見(jiàn)下（圖2）

（圖2）現(xiàn)在這樣，已經(jīng)成為“理所當(dāng)然”

通過(guò)組織界面元素穴肘，體現(xiàn)親疏關(guān)系歇盼，保證條理清晰，不僅做設(shè)計(jì)時(shí)要注意评抚，開(kāi)發(fā)的時(shí)候也要重視豹缀。

對(duì)齊：任何元素都不能在界面中隨意擺放，應(yīng)該跟界面中的其他元素存在相應(yīng)的視覺(jué)關(guān)系慨代。

如果多看閱讀的圖書(shū)詳情頁(yè)面邢笙，簡(jiǎn)介信息和操作按鈕隨機(jī)擺放，像尚未完成的拼圖零件侍匙，會(huì)讓人無(wú)比煩亂（強(qiáng)迫癥患者不要看）氮惯，如下（圖3）。

（圖3）散亂擺放的圖書(shū)信息和操作按鈕

實(shí)際頁(yè)面見(jiàn)下（圖4）轴咱，書(shū)名、作者缭裆、評(píng)分中狂、價(jià)格左對(duì)齊，評(píng)分標(biāo)記星星與評(píng)價(jià)人數(shù)水平方向?qū)R章喉，閱讀與購(gòu)買(mǎi)、收藏與贈(zèng)送等根據(jù)操作類型分組，各自在水平方向?qū)R告唆。整潔的排版布局，提供流暢的視覺(jué)引導(dǎo)晶密。

（圖4）干凈整齊的排版

通過(guò)將文字信息擒悬、操作按鈕的分別對(duì)齊，來(lái)明確它們要傳遞的信息稻艰。一般在設(shè)計(jì)過(guò)程中懂牧，很少會(huì)出現(xiàn)這種混亂的情況。更多是在開(kāi)發(fā)測(cè)試階段尊勿，界面中的類似問(wèn)題會(huì)比較多僧凤，尤其是不同尺寸屏幕適配的時(shí)候。

重復(fù)：界面中的元素元扔、樣式躯保、空間關(guān)系等有意識(shí)地在整個(gè)產(chǎn)品中重復(fù)，以保持良好的一致性澎语。

比如微信的底部功能欄途事，不管當(dāng)前在哪個(gè)功能模塊，它都以相同的風(fēng)格樣式擅羞、功能數(shù)量尸变、排列順序出現(xiàn)。不會(huì)因?yàn)閺奈⑿徘袚Q到通訊錄减俏，就突然多出一個(gè)或減少一個(gè)功能召烂，或者改變排列順序。見(jiàn)下（圖5）

（圖5）微信統(tǒng)一的底部功能欄

又比如簡(jiǎn)書(shū)垄懂，統(tǒng)一采用曙光色作為焦點(diǎn)狀態(tài)骑晶；根據(jù)使用場(chǎng)景出現(xiàn)的元素，比如搜索和提醒草慧，采用同樣的樣式和位置桶蛔；文章列表在不同的分類下也是統(tǒng)一的卡片樣式（白天和夜間模式卡片底色、文字顏色有區(qū)別漫谷，但是在同一個(gè)模式下仔雷，對(duì)應(yīng)的樣式會(huì)始終保持一致）。

（圖6）簡(jiǎn)書(shū)統(tǒng)一的顏色和產(chǎn)品結(jié)構(gòu)

聰明地使用重復(fù)的手法，不僅可以強(qiáng)化設(shè)計(jì)效果碟婆、提高信息清晰度电抚，使用戶能夠快速熟悉和習(xí)慣產(chǎn)品，增加認(rèn)同感竖共，還可以營(yíng)造成熟蝙叛、穩(wěn)定的產(chǎn)品形象。對(duì)開(kāi)發(fā)來(lái)說(shuō)公给，可以減少代碼量借帘、便于統(tǒng)一管理和修改。

對(duì)比：如果兩個(gè)界面元素要傳遞的信息不完全相同淌铐，就應(yīng)該在視覺(jué)上加以區(qū)別肺然，有利于信息閱讀。

如多看閱讀書(shū)城分類列表的書(shū)籍信息腿准，見(jiàn)下（圖7）际起。左邊的文字樣式未做對(duì)比區(qū)分，雖然能夠正常閱讀吐葱，但是信息層級(jí)顯然不如右邊有對(duì)比區(qū)分的明確街望。左邊沒(méi)有字號(hào)、顏色的對(duì)比唇撬，顯得呆板不夠美觀它匕；右邊則能夠讓人閱讀得很輕松，并感到愉悅窖认。

（圖7）多看閱讀書(shū)籍列表

手機(jī)QQ的聊天界面豫柬，見(jiàn)下（圖8）。左邊對(duì)界面中現(xiàn)有圖形元素作了統(tǒng)一的樣式處理扑浸，消除了對(duì)比烧给，于是可以發(fā)現(xiàn)無(wú)法區(qū)分操作層級(jí)，是否可以點(diǎn)擊也辨別不出來(lái)喝噪，并且失去重點(diǎn)础嫡。右邊是實(shí)際界面，圖形元素有樣式對(duì)比酝惧，層級(jí)明確榴鼎，是否可點(diǎn)非常明顯，業(yè)務(wù)邏輯體現(xiàn)得充分合理晚唇。

（圖8）QQ聊天界面

對(duì)比可以有效地組織界面信息巫财，體現(xiàn)信息層級(jí)關(guān)系，幫助用戶理解產(chǎn)品操作邏輯哩陕。

實(shí)際上平项，很少有一個(gè)設(shè)計(jì)赫舒，會(huì)只應(yīng)用這四個(gè)原則中的某一個(gè)。親密性闽瓢、對(duì)齊接癌、重復(fù)、對(duì)比扣讼，它們相互協(xié)作缺猛，服務(wù)整體效果。

這本書(shū)的主題届谈，幾乎可以視為形式美法則與格式塔原理的交集：

形式美法則：變化與統(tǒng)一枯夜、對(duì)稱與均衡弯汰、節(jié)奏與韻律艰山；

格式塔原理：接近性、相似性咏闪、連續(xù)性曙搬、封閉性、對(duì)稱性鸽嫂、主體/背景纵装、共同命運(yùn)；

然后又可以促進(jìn)對(duì)形式美法則與格式塔原理之間差異的理解据某。

懂更多設(shè)計(jì)原理橡娄，不一定能做出好設(shè)計(jì)，但可以讓好設(shè)計(jì)發(fā)生得更容易癣籽。

所以挽唉，大家都來(lái)看看這本講設(shè)計(jì)的書(shū)吧。