產(chǎn)品經(jīng)理通常不是通常意義上的管理者郁竟,在產(chǎn)品流程中交互、視覺由境、開發(fā)棚亩、測試人員只是你的伙伴而不是下屬蓖议,的確也應當如此。這樣會要求你的每個決定都應該有理有據(jù)讥蟆,讓人信服的勒虾,而不是讓人服從的。本書在視覺階段給予我們明確的方法論瘸彤,讓我們知道什么是對的修然,錯又在哪里?
背景
在視覺設計階段质况,我們的視覺設計師根據(jù)原型稿輸出產(chǎn)品最終的臉面愕宋。當我們拿到設計稿總覺得哪里不對,覺得不夠精致结榄、不夠漂亮中贝,但又不知道是什么問題時,我們通常會說:“再優(yōu)化下臼朗、再改一版……邻寿。”這樣的建議明顯是不夠?qū)I(yè)的视哑、不負責任的绣否、無法說服設計師朋友的。
四大原則
本書的四大設計原則(親密性黎炉、對齊枝秤、重復、對比)慷嗜,適用于任何設計稿淀弹。很多你覺得不夠好又不知道因為什么的問題,都在本書中提煉成方法論庆械,有根有據(jù)的進行設計評議薇溃。
親密性
如果兩個元素存在邏輯上的親密關系,那么應該將他們更近的放在一起缭乘,形成一塊視覺單元沐序。如果兩塊內(nèi)容不存在邏輯關系,那么他們就應該適當?shù)挠每瞻讌^(qū)隔開來堕绩。
運用親密性原則策幼,可以讓信息從邏輯關系更有條理,更容易被理解奴紧、閱讀特姐,親密性而產(chǎn)生的空白也是設計師們最喜歡的“留白”,會讓頁面更加美觀黍氮。
不過有些問題是應該被大家注意的
- 避免一個頁面上有太多因空白而造成孤立的元素唐含,不要超過5個浅浮,但是不絕對。
- 不要在不同層級中加入相同距離的空白捷枯,這里應該和“對比”原則共同體現(xiàn)的滚秩。(本博客模版顯然在“親密性”做得不夠,不同層級間的距離一致淮捆,之后有時間我會做模版調(diào)整郁油。)
- 最重要的是,頁面中元素的邏輯關系要明確的清楚争剿,不然“親密性”只會產(chǎn)生副作用已艰。
本書的“親密性”與《簡約至上》中的“組織”是同一思想,都為了讓用戶和讀者擁有更好的體驗蚕苇。
對齊
頁面上的任何元素都不能隨意擺放,除非你能說出為什么這么做凿叠。既然他們在同一頁面上涩笤,每個元素都應該和其他元素存在視覺聯(lián)系,不然就會導致混亂盒件。
運用對齊是最容易讓設計產(chǎn)生立竿見影的統(tǒng)一和條理效果的方式蹬碧,觀察頁面上的全部元素,是不是和某個其他元素產(chǎn)生了關聯(lián)炒刁。
有些問題應該被注意的
- 盡量避免“居中對齊”恩沽,如果不是專業(yè)人員,盡量不要嘗試該方式翔始。
- 避免采用多種對齊方式(圖文兩列內(nèi)容罗心,圖片居右、文字依著圖片的基準線居左城瞎,是個很不錯的對齊方式)渤闷。
左對齊和右對齊同時出現(xiàn),但是標題的右邊和下方文字的右邊建立了一條線脖镀,不會產(chǎn)生混亂飒箭。
重復
重復通常有兩種作用“強調(diào)”與“統(tǒng)一”,重復可以將不同視覺模塊統(tǒng)一在一起蜒灰,讓用戶覺得他們是分割的弦蹂,但又是一個統(tǒng)一的整體。
- “統(tǒng)一”强窖,可能是一條線凸椿、一個顏色、一個字體毕骡、一個符號削饵、一個結(jié)構岩瘦,對于多頁內(nèi)容尤其重要(宣傳冊、多頁網(wǎng)站的統(tǒng)一風格)窿撬。
- “強調(diào)”启昧,當下方某個文字和標題采用重復,下方某個文字就會被注意劈伴、被強調(diào)(如果頁面中哪個元素吸引了你密末,那么就可以將它做為重復元素)。
應該避免太多重復跛璧,太多的重復就失去了“強調(diào)”和“對比”的意義严里,重復的應該是點而不是面。
對比
對比的根本目的有兩個“加強”和“組織”追城,兩者效果通常是相輔相成的刹碾,可以用任何元素來形成對比。
- “加強”吸引讀者首先關注你最想讓他看到的內(nèi)容(引導視線)座柱,讓他看到最吸引他的地方迷帜。
- “組織”可以使讀者清晰架構和層級,避免錯誤的理解信息流色洞。
需要注意的問題:如果確定要采用對比戏锹,那么就讓他們截然不同。不要用18px和17px火诸、黑色和黑棕色锦针,會讓用戶迷惑的對比,切記切記置蜀!