編者按：新手想快速進步，多參考專業設計師的設計思路是特別有幫助的捷徑之一，今天阿里的同學分享一個新項目的設計小結，文中里關于色彩與版式的諸多細節，以及幾個有趣的細節都非常值得設計師們借鑒，捷徑就在這里，別走錯路咯！

產品定位/價值/用戶分析

前臺用戶：面對1688網站全體用戶
用戶性別/年齡分析：以30歲上下的男性為主
網站產品客戶聲音收集通道分散，不易聚集。Pd難以收集優質客戶需求，ued無法獲得一手用戶聲音。客戶沒有統一的提建議的概念及更加有效的反饋機制，1688需要更加完整的建議系統。

設計風格制定（前臺）

1. 色彩制定

首先來平臺提建議的用戶往往是在使用網站時遇到問題或不滿，可能是帶有情緒的，這個建議平臺在顏色的運用方面就希望能起到一些安撫作用，綠色往往給人視覺感受通常是心情平靜、舒適、健康、希望，也有優化產品的含義。同時又不希望給人過冷的感覺，所以適合與黃色搭配設計。

這些色彩術語你懂了沒？不熟悉趕緊就來這里漲漲姿勢?→?《設計師的配色理論：你真懂顏色了嗎？》

如何提取色彩方案？小教程在這兒呦?→ 《配色弱有救了！教你利用圖片創建獨有的色彩方案！》

2. 質感設定

質感上希望有一些紙張/卡片的感覺，因為是提建議的平臺，可以給用戶更多的代入感。另外就是簡潔、干凈，這樣主要信息才能更好的展示。

3. 版式風格

為了便于用戶更好專注建議文字內容，所以弱化頁面中的分割線，同時對于版塊與版塊也用不同底色進行區分，簡潔明了。因為建議平臺中有大量用戶建議展示，所以特別注重文字行于行之間的距離，避免排布過于緊密，用戶在瀏覽時會產生疲勞感。

設計風格制定（后臺）

1. 色彩方面

考慮到前后臺的呼應，所有顏色上仍然想保持一些關聯性。這是視覺方面的定位希望體現簡潔、清爽和后臺感。采用了飽和度比較低的灰藍、灰色和綠色進行搭配使用，而強調色采用紅色進行凸顯。

2. 質感與版式

這里也參考了國內外一些競品，偏后臺工具類的頁面。可以看到基本上都是扁平化風格，弱化線條，整體用色方面飽和度較低，大的版塊用底色進行區分，當前狀態、行動點及重要內容用比較醒目的顏色進行突出。

文字上面基本采用不同深度的灰色進行區分，突出不同重要級及頁面的前后層次感。為了增加簡潔、輕松的視覺感受，多處采用了圓角的運用，包括用戶頭像，搜索框，tab等。

幾個有趣的地方

1. 頭部為什么有哪些圖形？

源于最初人們對“回聲”的印象都是來自山谷，所以把“山谷”的形象用幾何三角形抽象出來，這樣作為修飾圖案運用于背景，這樣既可以使頭部不顯得那么單調，又對產品主題有一定映射聯系。

2. 不同產品對應不同產品圖片

每個產品對應不同的背景圖片，當用戶關注了多個產品，在不同產品之間進行切換時，對應的產品頁面背景圖也隨之變化，背景圖片與產品線特點相關，起到一些詮釋作用，同時讓用戶更好地感受到類目切換的感覺。

3. 報錯頁面

報錯頁面為什么用了二娃，不說你也知道吧？回聲項目現在仍在進行中，也歡迎大家給予關注，給我們一些好的意見和建議，謝謝！

【圍觀各大企業的設計實戰項目！】

網易版：最受歡迎的網易云音樂誕生過程！
《項目實戰！網易云音樂IPAD V1.0設計總結》

騰訊家：創意十足大受好評的小紅點是怎么來的？
《讓創意落地！QQ手機版5.0“一鍵下班”設計小結》

阿里系：網站的實戰也不能少！經驗超多！
《經驗分享！阿里巴巴皮革城網站設計總結》

原文地址：aliued
作者：時光真瘋狂

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：