年初小程式即將釋出時，幾乎所有的網際網路從業人員都會討論甚至希望在波浪潮裡能有所為，開啟一個新的局面。 2022 年已過大半，小程式只悄聲作為一些產品的附加入口。

　　灰評是一個客觀評價商品的 UGC 產品，我們趕上了波小程式的浪潮，而且產品本身是個試研發的產品，所以產品設計上就是一個產品+一個視覺，繼而有幸參與了很多互動上的設計。

　　從頁由上往下看灰評的主要體驗流程：

　　搜尋——搜尋您想要檢視的商品或者品牌

　　測評文章——瀏覽當下熱點商品的評測

　　檢視/新增清單——檢視自己已經列出的商品清單或者新建清單

　　我的積分——檢視積分、累積積分和使用積分

　　商品評價列表——檢視當下熱點商品的評價

　　小程式本身的特點決定它設計上的特殊性：

　　因為不需要安裝，佔用記憶體空間忽略不計；但掃描二維碼時要方便載入，所以要儘量控制本地資料、精簡介面控制元件，做減法設計。不然載入失敗很有可能是空白頁面，為此我們還做了預載入的介面，防止載入失敗後太尷尬。

　　一次開發多終端適配。因為產品的性質，我們定位的多使用者是較高階小眾，所以設計上是以蘋果 iPhone6/iPhone7 尺寸為準，在手機尺寸上屬於中等大小，為了能儘量在各種終端清晰良好顯示，在介面上的影象元素選擇是：簡單形狀＞多種效果形狀＞攝影圖，也就是要求設計元素儘量單純。

　　小程式的設計都是在 WordPress 微信的大環境裡做的，相對於 WordPress APP 的 8 、 9 年開發歷程，有很多效果（如某些動畫）是不成熟無法實現的，就規模大如大眾點評，小程式上功能也很少。

　　總的來講就是比普通的 WordPress APP 更講究扁平化的設計，把它當作非常重要的準則。產品設計在在視覺上要表現的輕盈、乾淨、效率高；功能層級上要結構單純、跳轉少、層級簡單；其次要高效率地展現內容，設計風格統一和諧。

　　輕視覺

　　視覺上的輕盈是當其衝的，給多使用者的直觀感受會影響多使用者次的體驗。

　　1.1 弱化次要功能

　　在產品不斷迭代的過程中，有些功能會逐漸邊緣化，這在視覺處理上要有明確的表示。

　　由於是新產品，資料量比較少，能搜尋到的東西比較有限，所以搜尋的功能是逐漸變弱的，尤其是當頁面出現了文章、積分等內容後，搜尋就要更要弱化顯示。所以搜尋由原來的的搜尋框逐漸變成了一個右上角的 icon 。有搜尋需求的時候可以找到，但是對平時的瀏覽不會有打擾。

　　1.2 去除冗餘減少線條

　　其實這屬於扁平化視覺的處理，去除邊界和明顯的區隔，跟多是讓內容本身來展現和區隔。

　　舊版卡片列表、新版細線列表

　　舊版隨便看看列表：原來是構想出重新整理上下翻轉的動效，但是由於小程式的限制無法實現這種動畫效果，如果沒有動畫效果那麼這種卡片+投影的表現方式完全可以由更簡單的形狀代替；

　　新版的隨便看看列表：由原來的 3 張圓角卡片變成了整塊細線分隔列表，這樣會減少粗線條帶來的割裂感，讓這塊內容更整體精緻、輕盈；

　　撰寫評價頁面本身內容複雜，而且從上到下的內容都需要多使用者去編輯填充，繼而使頁面清晰、主次分明就更重要。

　　星級和長評論的變化

　　所以介面整體先去掉了多使用者已知的商品資訊；長評論輸入區域去掉了外框線的束縛，用自身文字塊和空間隔開文字和圖片；

　　頂部的星級是對當前商品的整體評級，所以與下方其他評價用色塊區分開，並且星星的造型也由原來的細線框式變成了淺色塊，整個頁面整體感變強，強調主次。

　　1.3 視覺統一輕鬆操作

　　個人認為，介面中視覺效果高度統一會讓頁面清晰協調，多使用者在操作過程中認知成本低，使用起來簡單輕鬆。

　　從搜尋到新增，以及詳情頁的上滑標題位置，介面高度統一

　　在新增寶貝到清單的操作中，因為建立清單、搜尋寶貝、新增寶貝等頁面結構基本是一致的，並且在操作流程上是連續的；而在標題上，與清單詳情的標題也是一致的。所以視覺上就保持了標題樣式的高度統一，建立清單控制元件和搜尋框也在高度上保持了統一，給多使用者在略複雜的搜尋新增流程上有個較好的體驗。

　　輕互動

　　2.1 最佳化標籤編輯邏輯

　　寫標籤是灰評區別於其他測評軟體的一個標誌，所以在初期寫標籤是個非常重要且值得強調的功能。

　　舊版輸入標籤流程

　　先寫評價的整體流程如上圖所示，只有後兩步涉及到複雜的互動邏輯，具體就可以參考豆瓣的寫觀影評價標籤的方式。但這個難點在於產品初期多使用者和資料都較少，多使用者能選擇的標籤少，要填寫的比較多；而且一般是要寫好、差評兩種，彈框式的操作就會讓多使用者來回在介面和彈框間往返，又因為小程式的環境問題，彈框上輸入文字的體驗並不好，並且網頁連結上的彈框也顯得厚重。

　　舊版：寫新標籤都要有個點選-選擇好/差評-輸入標籤-確定然後回到寫評價的頁面，並且每次輸入標籤時，鍵盤彈起會頂起彈框介面閃動。

　　新版標籤的輸入方法

　　新版：

　　點選”+新標籤”——-頁面底部會彈起輸入框

　　滑動選擇填寫好評或者差評——-右邊輸入框相應變黃色或者灰色

　　輸入評價文字——–右邊的收起箭頭變成傳送按鈕

　　點選空白區域——–整條輸入 tab 消失，露出原來的發出去按鈕

　　好壞差評的選擇由複雜的圖形設計變成了簡單形狀的開關形式，好壞標籤的顏色+對應文字可直觀的表現其屬性；發出去按鈕和收起 icon 由框內文字的有無來切換。最佳化後可以連續輸入並看到當前的輸入情況，減少每次寫標籤的繁瑣過程和彈框的彈跳突兀感，整個流程也會更統一。

　　2.2 複用位置靈活變化減輕頁面

　　在一些內容較多的頁面，編輯或者滑動時，能靈活把控一些控制元件的變換可以有效利用有限的空間而不影響操作體驗，但前提是控制元件變化後不影響操作使用。

　　清單詳情頁常態、清單詳情頁編輯態

　　在清單詳情頁，編輯狀態下有很多地方可以改變，並且不僅是單純的刪除。如果是在底部加個 tab 按鈕來操作，一次很難編輯所有的需求，並且也會讓頁面變的厚重。而點選編輯後，商品的排名標識是不需要的，收起和點評也可以暫時擱置，所以變換商品刪除操作是複用排名形式和位置，能感受到變化但不會有多少突兀感；列表中的編輯和置頂 icon 複用原來控制元件的位置並且保持大的間距以免誤操作。

　　清單詳情頁屏、清單詳情頁下滑

　　在瀏覽清單詳情頁下滑時，因為仍然要保持清單標題的可編輯性，所以設定清單標題和其他操作停留在黑色的標題欄上，確保統一清晰的展示並且方便編輯。

　　反思點

　　3.1 不能跳出產品給的框架做突破性的、根本性的總結

　　好壞標籤是本產品的靈魂、基礎，區別於其他評價類產品的本質。

　　在初產品經理的意思是把標籤分為兩類，並標上好、壞的的標識以及過長的好評度進度條。這種方式先是笨拙的，設計度不高：進度條樣式的展示比較適合多類對比（比如蓋得排行），對於一種產品的話有更直接更精簡的方式；再者對標籤標上好壞的字樣，是比較生硬低效的歸類，應該讓它本身的樣式來讓多使用者輕易區別其屬性（比如您不能給好、壞人貼上標籤）；而正負面評價分開展示不利於排版最佳化。

　　舊版、新版好差評標籤展示

　　標籤混合展示並且視覺最佳化後，找了 10 人左右做了對色彩對應的屬性訪問，幾乎所有人都能很快的說出黃色、灰色對應的標籤屬性，並且對評分設計也更能接受。

　　3.2 作為視覺想急於表現喜愛的形式感而忽略內容展示

　　作為視覺設計，可能都有一種終於有機會發表自己喜愛的形式的感受，但在具體的產品設計中不一定合適，在形式感和內容顯示上做了錯誤的取捨。當然，經過更久推敲或許也會有更優的解決方案。

　　舊版、新版分享頁

　　舊版：特別痴迷於所有元素居中的排版方式，會感覺比較大氣唯美；但是在本產品中經過居中的排版難以在手機的屏中展示出標籤和長評論，佔據篇幅的不是是標籤而是已知的商品資訊；

　　新版：介面上部採用左對齊版式，圖片、 logo 、名稱和星級組合在左上角；左對齊的標籤大限度的呈現標籤（多 10 條 10 個字的標籤）圖片和長評論下面居中顯示；圖示簡化成清晰簡明的按鈕。改版後可以在屏呈現出所有的標籤、配圖及部分長評論。規整內容，後一版的內容是較多的，但是也是比較整齊乾淨的。