設計過程中“更明顯點”這句話怎麼破！

在做方案的時候，時常會聽到這樣的話，這個地方應該更明顯一點，今天拿閣主需要設計的一個徽章注釋來進行說明。如下圖，是單個徽章的展示，新得到一個徽章還沒有被查看時，

名字左邊會有小紅點提示。印有“PB”字樣的小icon是今天的主角，表述的是那一行小字是表示“個人最好成績”的展現，是動態的資料。

而最初設計時，PB是用小型的徽章樣式進行展示的，與大的徽章有些重複，所以，並且用線性的圖案，所以會收到PM“更明顯點”的方案回饋。

遇到這樣的狀況應該怎樣分析呢？

先分析話中話的含義

表面上是在說小的icon需要更顯眼一點，其實是在說，從企業的角度出發這一串的資訊比較重要，需要更突出一點，在不影響美觀的前提下，讓用戶更留意一些這裡，引導用戶去採取一些行動。

聽完話之後先不要忙著去行動，而是靜下心來，分析一下這話到底要表達什麼意思。將咱們所做的事情放到更長一點的時間維度上去進行思考。

從資訊邏輯的角度去進行分析

1.傳達什麼內容

比方說上方小的“PB”icon，所提示的是後方一串小字的作用。可能普通用戶不太理解，看不出來這是什麼意思，可針對的是運動愛好者，特別是golf的運動愛好者而設計，PB的縮寫是行業內的約定俗成，所以在內容傳達上不會有所歧義。

2.需要起到什麼作用

PB的小icon是為了吸引使用者的視線。對用戶來說，可以有也可以沒有，

但從企業的角度來講，企業需要通過突出這個資訊，告訴使用者自己曾經做了多大的成就，給予用戶一種挑戰自己的動力，讓用戶更有意願去使用APP。所以它應該起到引導使用者去關注資訊的作用，那麼在做方案的時候就需要讓使用者不那麼費力就可以注意到。

3.該元素與頁面上其他元素之間的關係

還需要注意的一點就是，將所需要分析的元素放在整個方案中，

去一起考慮。圖中組成一個單元體的元素有：徽章圖、徽章名、提示小紅點、PB小icon、個人最佳成績的資料。而提示小紅點在徽章圖被點擊查看後就會消失，有時候會出現有時候不會出現。而徽章圖系統設計了五種不同的色彩，也就是說如果作為列表呈現的時候色彩會很多。徽章名字有長有短，可能是一排也可能是兩排，不過設定了最長為兩排。

那麼PB的定位就是，常駐元素並且需要搭配多彩色進行呈現。

這些分析到UI層面都會有用。

UI層面表現

到了UI層面，改進可以有幾條思路，首先將形狀規整嘗試色塊的表達，成為圓形或者矩形，考慮到圖中有小紅點，再多個圓形出來就累贅了，所以用矩形來搭配，資料區的資訊更加整潔，大面積的同色區有助於資訊突出。如下圖

接著可以嘗試拉開對比，採用淺色底深色字或者深色底淺色字的表現形式，彩色和無彩色都可以進行嘗試。如下嘗試

最後檢查與頁面上其他元素是否保持統一，因為考慮到APP其他的地方所有紅色點都是表示未讀狀態，所以保持這樣的資訊傳達不變。而又考慮到徽章圖顏色種類比較多，整個頁面會比較亂，那麼在資料區就儘量減少多色的表達，用無彩方案去表達，否則畫面會“閃瞎偶的gou眼”。最終方案如下圖。

設計是一個理性和感性☆禁☆交替進行權衡，顧全大局的過程，其中鍛煉的是設計師的資訊收集、表達、總結、邏輯思考等等的能力，倒不覺得累和苦，反而覺得能學設計是一種幸運~

閣主一直在琢磨怎樣寫出更好的文章，帶給大家更多的思考，如果真正寫工作的分析過程會有點枯燥，大家在閱讀的時候會感覺有點累，如果大夥有好的建議可以在留言區進行留言。

Sophia的玲瓏閣，一個愛健身的交互設計師妹紙

接著可以嘗試拉開對比，採用淺色底深色字或者深色底淺色字的表現形式，彩色和無彩色都可以進行嘗試。如下嘗試

最後檢查與頁面上其他元素是否保持統一，因為考慮到APP其他的地方所有紅色點都是表示未讀狀態，所以保持這樣的資訊傳達不變。而又考慮到徽章圖顏色種類比較多，整個頁面會比較亂，那麼在資料區就儘量減少多色的表達，用無彩方案去表達，否則畫面會“閃瞎偶的gou眼”。最終方案如下圖。

設計是一個理性和感性☆禁☆交替進行權衡，顧全大局的過程，其中鍛煉的是設計師的資訊收集、表達、總結、邏輯思考等等的能力，倒不覺得累和苦，反而覺得能學設計是一種幸運~

閣主一直在琢磨怎樣寫出更好的文章，帶給大家更多的思考，如果真正寫工作的分析過程會有點枯燥，大家在閱讀的時候會感覺有點累，如果大夥有好的建議可以在留言區進行留言。

Sophia的玲瓏閣，一個愛健身的交互設計師妹紙