這本書通過簡潔明了的語言、通俗易懂的示例,將優秀設計通用的原則總結歸納為四點:親密性、對齊、重復、對比。適合所有能夠進行基礎閱讀的人學習,跟書名非常貼切。
當我把這本書推薦給產品組的開發人員時,得到的反饋是:示例都是印刷品設計,跟移動開發沒有半毛錢關系。orz,這背后的愛恨情仇,如果展開則實在沒有必要,否則將是通篇的吐槽。所以下面將這本書的描述語言、示范案例進行移動端界面的轉化。
親密性:將界面中相關的元素組織在一起,成為一個組,讓它們不被視作一堆散亂且彼此無關的片段。
如果微信的信息列表頁面,每一項的名稱、時間、摘要只是樣式區別卻未經組織,就會變得不那么容易閱讀,如下(圖1)。尤其在列表項很多的時候,將擁擠不堪,讓人窒息。
實際的處理方式僅僅是采用了合理的列表項間距,以及每一項當中名稱、時間、摘要的分布距離,就能輕松區分出列表項、每一項中內容的關系。秩序井然,符合邏輯,保證了良好的可讀性。見下(圖2)
通過組織界面元素,體現親疏關系,保證條理清晰,不僅做設計時要注意,開發的時候也要重視。
對齊:任何元素都不能在界面中隨意擺放,應該跟界面中的其他元素存在相應的視覺關系。
如果多看閱讀的圖書詳情頁面,簡介信息和操作按鈕隨機擺放,像尚未完成的拼圖零件,會讓人無比煩亂(強迫癥患者不要看),如下(圖3)。
實際頁面見下(圖4),書名、作者、評分、價格左對齊,評分標記星星與評價人數水平方向對齊,閱讀與購買、收藏與贈送等根據操作類型分組,各自在水平方向對齊。整潔的排版布局,提供流暢的視覺引導。
通過將文字信息、操作按鈕的分別對齊,來明確它們要傳遞的信息。一般在設計過程中,很少會出現這種混亂的情況。更多是在開發測試階段,界面中的類似問題會比較多,尤其是不同尺寸屏幕適配的時候。
重復:界面中的元素、樣式、空間關系等有意識地在整個產品中重復,以保持良好的一致性。
比如微信的底部功能欄,不管當前在哪個功能模塊,它都以相同的風格樣式、功能數量、排列順序出現。不會因為從微信切換到通訊錄,就突然多出一個或減少一個功能,或者改變排列順序。見下(圖5)
又比如簡書,統一采用曙光色作為焦點狀態;根據使用場景出現的元素,比如搜索和提醒,采用同樣的樣式和位置;文章列表在不同的分類下也是統一的卡片樣式(白天和夜間模式卡片底色、文字顏色有區別,但是在同一個模式下,對應的樣式會始終保持一致)。
聰明地使用重復的手法,不僅可以強化設計效果、提高信息清晰度,使用戶能夠快速熟悉和習慣產品,增加認同感,還可以營造成熟、穩定的產品形象。對開發來說,可以減少代碼量、便于統一管理和修改。
對比:如果兩個界面元素要傳遞的信息不完全相同,就應該在視覺上加以區別,有利于信息閱讀。
如多看閱讀書城分類列表的書籍信息,見下(圖7)。左邊的文字樣式未做對比區分,雖然能夠正常閱讀,但是信息層級顯然不如右邊有對比區分的明確。左邊沒有字號、顏色的對比,顯得呆板不夠美觀;右邊則能夠讓人閱讀得很輕松,并感到愉悅。
手機QQ的聊天界面,見下(圖8)。左邊對界面中現有圖形元素作了統一的樣式處理,消除了對比,于是可以發現無法區分操作層級,是否可以點擊也辨別不出來,并且失去重點。右邊是實際界面,圖形元素有樣式對比,層級明確,是否可點非常明顯,業務邏輯體現得充分合理。
對比可以有效地組織界面信息,體現信息層級關系,幫助用戶理解產品操作邏輯。
實際上,很少有一個設計,會只應用這四個原則中的某一個。親密性、對齊、重復、對比,它們相互協作,服務整體效果。
這本書的主題,幾乎可以視為形式美法則與格式塔原理的交集:
形式美法則:變化與統一、對稱與均衡、節奏與韻律;
格式塔原理:接近性、相似性、連續性、封閉性、對稱性、主體/背景、共同命運;
然后又可以促進對形式美法則與格式塔原理之間差異的理解。
懂更多設計原理,不一定能做出好設計,但可以讓好設計發生得更容易。
所以,大家都來看看這本講設計的書吧。