阿里設(shè)計(jì)實(shí)戰(zhàn)！“回聲”項(xiàng)目第一期設(shè)計(jì)小結(jié)

編者按：新手想快速進(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à)值/用戶分析

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

設(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ì)?→?《設(shè)計(jì)師的配色理論：你真懂顏色了嗎？》

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

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

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

3. 版式風(fēng)格

為了便于用戶更好專注建議文字內(nèi)容，所以弱化頁面中的分割線，同時(shí)對(duì)于版塊與版塊也用不同底色進(jìn)行區(qū)分，簡(jiǎn)潔明了。因?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)簡(jiǎn)潔、清爽和后臺(tái)感。采用了飽和度比較低的灰藍(lán)、灰色和綠色進(jìn)行搭配使用，而強(qiáng)調(diào)色采用紅色進(jìn)行凸顯。

2. 質(zhì)感與版式

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

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

幾個(gè)有趣的地方

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

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

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

每個(gè)產(chǎn)品對(duì)應(yīng)不同的背景圖片，當(dāng)用戶關(guān)注了多個(gè)產(chǎn)品，在不同產(chǎn)品之間進(jìn)行切換時(shí)，對(duì)應(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)注，給我們一些好的意見和建議，謝謝！

【圍觀各大企業(yè)的設(shè)計(jì)實(shí)戰(zhàn)項(xiàng)目！】

網(wǎng)易版：最受歡迎的網(wǎng)易云音樂誕生過程！
《項(xiàng)目實(shí)戰(zhàn)！網(wǎng)易云音樂IPAD V1.0設(shè)計(jì)總結(jié)》

騰訊家：創(chuàng)意十足大受好評(píng)的小紅點(diǎn)是怎么來的？
《讓創(chuàng)意落地！QQ手機(jī)版5.0“一鍵下班”設(shè)計(jì)小結(jié)》

阿里系：網(wǎng)站的實(shí)戰(zhàn)也不能少！經(jīng)驗(yàn)超多！
《經(jīng)驗(yàn)分享！阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié)》

原文地址：aliued
作者：時(shí)光真瘋狂

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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