起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識阿里設計實戰(zhàn)！“回聲”項目第一期設計小結(jié)
編者按：新手想快速進步，多參考專業(yè)設計師的設計思路是特別有幫助的捷徑之一，今天阿里的同學分享一個新項目的設計小結(jié)，文中里關于色彩與版式的諸多細節(jié)，以及幾個有趣的細節(jié)都非常值得設計師們借鑒，捷徑就在這里，別走錯路咯！
產(chǎn)品定位/價值/用戶分析
網(wǎng)站產(chǎn)品客戶聲音收集通道分散，不易聚集。Pd難以收集優(yōu)質(zhì)客戶需求，ued無法獲得一手用戶聲音?？蛻魶]有統(tǒng)一的提建議的概念及更加有效的反饋機制，1688需要更加完整的建議系統(tǒng)。
前臺用戶：面對1688網(wǎng)站全體用戶
用戶性別/年齡分析：以30歲上下的男性為主
設計風格制定（前臺）
1. 色彩制定
首先來平臺提建議的用戶往往是在使用網(wǎng)站時遇到問題或不滿，可能是帶有情緒的，這個建議平臺在顏色的運用方面就希望能起到一些安撫作用，綠色往往給人視覺感受通常是心情平靜、舒適、健康、希望，也有優(yōu)化產(chǎn)品的含義。同時又不希望給人過冷的感覺，所以適合與黃色搭配設計。
這些色彩術(shù)語你懂了沒？不熟悉趕緊就來這里漲漲姿勢?→?《設計師的配色理論：你真懂顏色了嗎？》
如何提取色彩方案？小教程在這兒呦?→?《配色弱有救了！教你利用圖片創(chuàng)建獨有的色彩方案！》
2. 質(zhì)感設定
質(zhì)感上希望有一些紙張/卡片的感覺，因為是提建議的平臺，可以給用戶更多的代入感。另外就是簡潔、干凈，這樣主要信息才能更好的展示。
3. 版式風格
為了便于用戶更好專注建議文字內(nèi)容，所以弱化頁面中的分割線，同時對于版塊與版塊也用不同底色進行區(qū)分，簡潔明了。因為建議平臺中有大量用戶建議展示，所以特別注重文字行于行之間的距離，避免排布過于緊密，用戶在瀏覽時會產(chǎn)生疲勞感。
設計風格制定（后臺）
1. 色彩方面
考慮到前后臺的呼應，所有顏色上仍然想保持一些關聯(lián)性。這是視覺方面的定位希望體現(xiàn)簡潔、清爽和后臺感。采用了飽和度比較低的灰藍、灰色和綠色進行搭配使用，而強調(diào)色采用紅色進行凸顯。
2. 質(zhì)感與版式
這里也參考了國內(nèi)外一些競品，偏后臺工具類的頁面?？梢钥吹交旧隙际潜馄交L格，弱化線條，整體用色方面飽和度較低，大的版塊用底色進行區(qū)分，當前狀態(tài)、行動點及重要內(nèi)容用比較醒目的顏色進行突出。
文字上面基本采用不同深度的灰色進行區(qū)分，突出不同重要級及頁面的前后層次感。為了增加簡潔、輕松的視覺感受，多處采用了圓角的運用，包括用戶頭像，搜索框，tab等。
幾個有趣的地方
1. 頭部為什么有哪些圖形？
源于最初人們對“回聲”的印象都是來自山谷，所以把“山谷”的形象用幾何三角形抽象出來，這樣作為修飾圖案運用于背景，這樣既可以使頭部不顯得那么單調(diào)，又對產(chǎn)品主題有一定映射聯(lián)系。
2. 不同產(chǎn)品對應不同產(chǎn)品圖片
每個產(chǎn)品對應不同的背景圖片，當用戶關注了多個產(chǎn)品，在不同產(chǎn)品之間進行切換時，對應的產(chǎn)品頁面背景圖也隨之變化，背景圖片與產(chǎn)品線特點相關，起到一些詮釋作用，同時讓用戶更好地感受到類目切換的感覺。
3. 報錯頁面
報錯頁面為什么用了二娃，不說你也知道吧？回聲項目現(xiàn)在仍在進行中，也歡迎大家給予關注，給我們一些好的意見和建議，謝謝！
原文地址：aliued
作者：時光真瘋狂
- 目前還沒評論，等你發(fā)揮！
