設計案例|在做方案時,“更明顯點”這句話怎么破

6 評論 6826 瀏覽 14 收藏 6 分鐘

在做方案的時候,時常會聽到這樣的話,“這個地方應該更明顯一點”。今天,閣主將拿出自己設計的一個徽章注釋來進行說明。

如下圖,這是單個徽章的展示,新得到一個徽章還沒有被查看時,名字左邊會有小紅點提示。印有“PB”字樣的小icon是今天的主角,表述的是那一行小字是表示“個人最好成績”的展現,是動態的數據。

而最初設計時,PB是用小型的徽章樣式進行展示的,與大的徽章有些重復,并且用線性的圖案,所以會收到PM“更明顯點”的方案反饋。遇到這樣的狀況應該怎樣分析呢?

先分析話中話的含義

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

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

從信息邏輯的角度去進行分析

1. 傳達什么內容

比方說上方小的“PB”icon,所提示的是后方一串小字的作用??赡芷胀ㄓ脩舨惶斫?,看不出來這是什么意思,可針對的是運動愛好者,特別是golf的運動愛好者而設計,PB的縮寫是行業內的約定俗成,所以在內容傳達上不會有所歧義。

2. 需要起到什么作用

PB的小icon是為了吸引用戶的視線。對用戶來說,可以有也可以沒有,但從企業的角度來講,企業需要通過突出這個信息,告訴用戶自己曾經做了多大的成就,給予用戶一種挑戰自己的動力,讓用戶更有意愿去使用APP。所以它應該起到引導用戶去關注信息的作用,那么在做方案的時候就需要讓用戶不那么費力就可以注意到。

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

還需要注意的一點就是,將所需要分析的元素放在整個方案中,去一起考慮。圖中組成一個單元體的元素有:徽章圖、徽章名、提示小紅點、PB小icon、個人最佳成績的數據。而提示小紅點在徽章圖被點擊查看后就會消失,有時候會出現有時候不會出現。而徽章圖系統設計了五種不同的色彩,也就是說如果作為列表呈現的時候色彩會很多?;照旅钟虚L有短,可能是一排也可能是兩排,不過設定了最長為兩排。
那么PB的定位就是,常駐元素并且需要搭配多彩色進行呈現。這些分析到UI層面都會有用。

UI層面表現

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

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

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

最終方案如下圖:

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

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

專欄作家

Sophiallg,微信公眾號:Sophia的玲瓏閣,人人都是產品經理專欄作家。一枚愛折騰,愛健身的交互設計妹紙。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫的很好啊,支持下

    來自廣東 回復
  2. 視覺設計取舍實在讓人糾結,但探索的過程也很有趣。

    來自廣東 回復
  3. dd

    來自浙江 回復
    1. 行風

      回復
    2. 行風

      回復