編者按：新手想快速進(jìn)步，多參考專業(yè)設(shè)計(jì)師的設(shè)計(jì)思路是特別有幫助的捷徑之一，今天阿里的同學(xué)分享一個(gè)新項(xiàng)目的設(shè)計(jì)小結(jié)，文中里關(guān)于色彩與版式的諸多細(xì)節(jié)，以及幾個(gè)有趣的細(xì)節(jié)都非常值得設(shè)計(jì)師們借鑒，捷徑就在這里，別走錯(cuò)路咯！

產(chǎn)品定位/價(jià)值/用戶分析

網(wǎng)站產(chǎn)品客戶聲音收集通道分散，不易聚集。Pd難以收集優(yōu)質(zhì)客戶需求，ued無法獲得一手用戶聲音?？蛻魶]有統(tǒng)一的提建議的概念及更加有效的反饋機(jī)制，1688需要更加完整的建議系統(tǒng)。

前臺(tái)用戶：面對1688網(wǎng)站全體用戶

用戶性別/年齡分析：以30歲上下的男性為主

設(shè)計(jì)風(fēng)格制定（前臺(tái)）

1. 色彩制定

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

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

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

2. 質(zhì)感設(shè)定

質(zhì)感上希望有一些紙張/卡片的感覺，因?yàn)槭翘峤ㄗh的平臺(tái)，可以給用戶更多的代入感。另外就是簡潔、干凈，這樣主要信息才能更好的展示。

3. 版式風(fēng)格

為了便于用戶更好專注建議文字內(nèi)容，所以弱化頁面中的分割線，同時(shí)對于版塊與版塊也用不同底色進(jìn)行區(qū)分，簡潔明了。因?yàn)榻ㄗh平臺(tái)中有大量用戶建議展示，所以特別注重文字行于行之間的距離，避免排布過于緊密，用戶在瀏覽時(shí)會(huì)產(chǎn)生疲勞感。

設(shè)計(jì)風(fēng)格制定（后臺(tái)）

1. 色彩方面

考慮到前后臺(tái)的呼應(yīng)，所有顏色上仍然想保持一些關(guān)聯(lián)性。這是視覺方面的定位希望體現(xiàn)簡潔、清爽和后臺(tái)感。采用了飽和度比較低的灰藍(lán)、灰色和綠色進(jìn)行搭配使用，而強(qiáng)調(diào)色采用紅色進(jìn)行凸顯。

2. 質(zhì)感與版式

這里也參考了國內(nèi)外一些競品，偏后臺(tái)工具類的頁面。可以看到基本上都是扁平化風(fēng)格，弱化線條，整體用色方面飽和度較低，大的版塊用底色進(jìn)行區(qū)分，當(dāng)前狀態(tài)、行動(dòng)點(diǎn)及重要內(nèi)容用比較醒目的顏色進(jìn)行突出。

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

幾個(gè)有趣的地方

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

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

2. 不同產(chǎn)品對應(yīng)不同產(chǎn)品圖片

每個(gè)產(chǎn)品對應(yīng)不同的背景圖片，當(dāng)用戶關(guān)注了多個(gè)產(chǎn)品，在不同產(chǎn)品之間進(jìn)行切換時(shí)，對應(yīng)的產(chǎn)品頁面背景圖也隨之變化，背景圖片與產(chǎn)品線特點(diǎn)相關(guān)，起到一些詮釋作用，同時(shí)讓用戶更好地感受到類目切換的感覺。

3. 報(bào)錯(cuò)頁面

報(bào)錯(cuò)頁面為什么用了二娃，不說你也知道吧？回聲項(xiàng)目現(xiàn)在仍在進(jìn)行中，也歡迎大家給予關(guān)注，給我們一些好的意見和建議，謝謝！

原文地址：aliued

作者：時(shí)光真瘋狂