產品經理懂UI設計師，4個小技巧

你們好，我是Kevin。這是2019年第136篇原創

國慶假期持續的天天一本閱讀計劃進行中。我在假期的前半段花了時間閱讀交互、設計的書籍。用於提高和彌補本身創業後在設計溝通和交互策劃的知識框架。

今天的覆盤與整理來自：《寫個你們看的設計書》，書本總共202頁。本書來自國外設計師，美國羅賓·威廉姆斯(RobinWilliams撰寫的。

同時在假期我更新了個人原型組件庫，若是你須要能夠點擊這裏查看並下載得到。

國慶更新|Kevin的原型部件庫，374個原型部件

設計4個強調點

我在工做中，隨着UI頁面的辨識積累可以大概判別出什麼是好的設計做品、什麼是通常的設計，但我卻沒有辦法告知一個標準讓團隊成員也快速具備這樣的能力。但這本書中反覆說起的4個強調點指出

對比contrast

對比的基本思想是，避免頁面上的元素太過類似。若是元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就乾脆讓他們大相徑庭。

重複repetition

上設計中的視覺要素在整個做品中重複出現。能夠重複顏色、形狀、材質、空間關係、線寬、字體、大小和圖片。

對齊alignment

任何東西都不能再頁面上隨意安防。每一個元素都應當與頁面上的另外一個元素有某種視覺聯繫

親密性proximity

彼此相關的項應當靠近鬼歸組在一塊兒。如何多喝項目之間存在很近的親密性，他們就會成爲一個視覺單元，而不是多個孤立的元素。

一個對齊與親密性的案例

左邊的宣傳單頁通過親密性與對齊的整理後來的效果。你能夠看到效果是很是明顯的！在沒有增長元素和調整文案的狀況下。

我見多太多設計師要求產品經理縮小與精簡文案來知足他們的設計。其實咱們應該首先思考的是設計上有沒有可能優化點，而不是在沒有開始前就「砍需求」，固然產品經理也應該輸出須要、價值最高的文案。

設計中避免的問題

在對齊上：

避免在頁面上混合使用多種文本對齊方式（也就是說，不要將某些文本劇中，而另一些文本右對齊）

重複性上避免：

避免重複太多的一個元素，重複太多會讓人套現。要注意對比的價值。

對比上避免：

要造成對比就加大力度，不要將一種粗線與一種更粗線進行對比。不要將棕色文本與黑色標題創建對比。避免使用兩種或多種相似的字體，若是各個項不一樣，乾脆讓他們大相徑庭！

一個對齊、對比、重複性案例

能夠看到經過對比，狗的頭像方向與大小進行了變化、背景白色與黑色顯明。一樣重複了商店的hugs名字。增長了對齊效果，字體的排版有了虛擬的邊界。

設計的路徑是什麼？

在這本書裏，還介紹了一個設計師的路徑應該是：

從中心點開始-將信息分組-建立重複

肯定但願用戶最早看什麼，除非有了設計規範不然就應該建立一個有強烈對比的中心點；

按邏輯進行分組，將元素與組件的關係組合。經過組之間的距離來作親和性；

創建一個能夠明顯感覺到邊界的對齊，好比垂直線條和照片邊界等，切記勿用線條來作邊界。最後建立重複能夠是字體的樣式、和頁面中的元素。

好，今天的分享就在這裏。