用一個(gè)個(gè)實(shí)際的、活生生的案例來說明 & 展現(xiàn) —— 設(shè)計(jì)細(xì)節(jié)拆分，還原真實(shí)的產(chǎn)品設(shè)計(jì)、開發(fā)等場景。

這一系列文章，好的設(shè)計(jì)，如何一步一步來的，從開始的 “呃～” 到最后的 “哇～”，相信作為教學(xué)例子，也實(shí)不為過。

聯(lián)想電腦管家2.0，首頁交互與視覺設(shè)計(jì)：

用 PC 端軟件為例子，因?yàn)檫@是我最近做的，記憶尤新，各種小細(xì)節(jié)、各種選擇原因都還歷歷在目，講述起來更通俗易懂，并且 UX Design 的本質(zhì)是一樣的，設(shè)計(jì)流程也大同小異，無論在電腦端、移動(dòng)端、還是別的設(shè)備上。

• 目的：干凈簡潔，完全區(qū)別于市場上已有的電腦管家的首頁設(shè)計(jì)
• 設(shè)計(jì)團(tuán)隊(duì)：PeoPeo Design
• 設(shè)計(jì)評(píng)估并改進(jìn)：作者本人

下圖為終稿版（當(dāng)然現(xiàn)在的管家產(chǎn)品已經(jīng)又迭代了很多很多版，但左側(cè)三環(huán)主體的設(shè)計(jì)依然沒變，并且它拿到了設(shè)計(jì)專利）：

1. 開始交互設(shè)計(jì)

a) 第一版提稿，感覺太簡單，頁面布局太像當(dāng)時(shí)的騰訊電腦管家，沒內(nèi)容沒創(chuàng)新，要求重新再想想：

b) 第二版設(shè)計(jì)稿，非常有想法，界面也清爽明朗。但是導(dǎo)航從底部改到左邊恐怕對(duì)技術(shù)開發(fā)的難度不是一般的大，因?yàn)樗麄円募夹g(shù)架構(gòu)，工作量和風(fēng)險(xiǎn)評(píng)估不通過。內(nèi)容區(qū)域的左側(cè)兩個(gè)圖表，恐怕技術(shù)和數(shù)據(jù)都是個(gè)難點(diǎn)，非常有可能出現(xiàn)兩條直線水平線的圖表，實(shí)在 “不好看”。于是放棄。

c) 第三版設(shè)計(jì)稿，干凈清爽，只是稍嫌散亂，沒有特色。也暫時(shí)沒有特別好的想法，于是只要求在這稿基礎(chǔ)上改進(jìn)一些，以便開始2.0新的視覺設(shè)計(jì)，任務(wù)艱巨繁重！

d) 第四稿，好似沒有特色，但似乎也挑不出毛病，交互設(shè)計(jì)暫定為它。

2. 開始視覺設(shè)計(jì)

a) 第一版初稿，背影底圖不是藍(lán)得奇怪耀眼，就是 copy 百度電腦管家或騰訊電腦管家的….. ?但左側(cè)圓環(huán)的設(shè)計(jì)很棒，比較特別，保留。

b) 第二版設(shè)計(jì)提稿，確定左側(cè)圓環(huán)的設(shè)計(jì)，“開始體檢” 按鈕的位置不夠聚焦，并且右側(cè)顯得到處都是按鈕，很奇怪。建議入到圓環(huán)下方，讓其非常突出，吸引用戶點(diǎn)擊。

c) 第三版設(shè)計(jì)稿，背景底圖重新設(shè)計(jì)，右側(cè)文字按鈕的布局嘗試小變化。

3. 設(shè)計(jì)中的爭吵

會(huì)議討論方案，鑒于時(shí)間緊等因素，老大暫定就下面左圖方案，細(xì)節(jié)再微調(diào)。

結(jié)束會(huì)議，我自己想了很久，還是決定跟所有人說出想法：這個(gè)設(shè)計(jì)方案我個(gè)人不同意，原因是與騰訊電腦管家（當(dāng)時(shí)）的首頁太像了，頁面布局基本一樣，只是換了大小圖標(biāo)文字描述而已……

幸而，得到了同事的支持和peopeo設(shè)計(jì)師們的理解，再次大家努力做出新的設(shè)計(jì)，讓聯(lián)想電腦管家有完全不同于市場已有產(chǎn)品的設(shè)計(jì)，有它自己的品牌感覺。

4. 全新的首頁設(shè)計(jì)方案

都非常、非常棒！peopeo 的設(shè)計(jì)師們特別棒！化壓力為動(dòng)力！

下面各圖，左側(cè)為初提稿，右側(cè)為 review 改進(jìn)稿：

方案1，2，蜂巢設(shè)計(jì)，展示數(shù)據(jù)一流，且有很多可擴(kuò)展空間。review 改進(jìn)主要移動(dòng) “體檢” 按鈕，讓整體不散亂，又有更多留白，更簡潔。

方案3，三環(huán)主體初現(xiàn)，界面干凈，功能區(qū)分清晰，重點(diǎn)突出。review 改進(jìn)將左大側(cè)定為視覺主區(qū)，右小側(cè)為副功能，右小下為廣告區(qū)，且各設(shè)計(jì)統(tǒng)一性強(qiáng)。因?yàn)槿说囊暰€通常從屏幕/界面的左上角開始，右下角其實(shí)是視線的 “小盲區(qū)”，那么重點(diǎn)突出的部分應(yīng)該在左側(cè)區(qū)域。

5. 定下首頁交互與視覺設(shè)計(jì)

繼續(xù)調(diào)整細(xì)節(jié)。這個(gè)過程非常冗長，甚至直到產(chǎn)品上線前夕都還在微調(diào)。比如：

• 背景圖流星、月亮太耀眼，淡化些。
• “開始體檢” 按鈕可以再大些。
• 大圓環(huán)左右的兩個(gè)小圓圈，不夠明顯，加強(qiáng)些。
• 背景圖那幾片荷花很奇怪啊，看不出來有水，它為什么在那兒？
• 鼠標(biāo)移到可點(diǎn)擊圖標(biāo)或按鈕，動(dòng)畫是什么樣，嘗試效果。
• 背景圖是深紫藍(lán)色，看起來有點(diǎn)邪魅啊，改改顏色，也不要那么深色～ ?我本人已經(jīng)非常不好意思讓 peopeo 設(shè)計(jì)師一直改了…… 但還是厚臉皮做了…..
• 快上線了，大圓環(huán)不顯示數(shù)據(jù)的部分，青藍(lán)色很亮很突出，似乎不太好，改淺試試看。
• 快上線了，大圓環(huán)及數(shù)據(jù)的動(dòng)畫不夠好，應(yīng)該是指示圓 & 環(huán)按照軌跡上升，到點(diǎn)了因?yàn)閼T性還要 “顫一顫”，同時(shí)數(shù)據(jù)從0開始一路攀升，直到當(dāng)前是什么數(shù)據(jù)，最好也 “左右搖擺” 以更真實(shí)的感覺，遂要求開發(fā)改進(jìn)…… ?開發(fā)怒視我，但還是默默改了，最后結(jié)果很贊！

6. 最后

呈現(xiàn)出接近完美的設(shè)計(jì)，有中國山水畫的意境，安寧祥和，界面簡潔獨(dú)特，重點(diǎn)突出，與市場上已經(jīng)類似產(chǎn)品完全不一樣的首頁設(shè)計(jì)，正是我們想要的：

后記：當(dāng)然這個(gè)界面也是有缺點(diǎn)的，后續(xù)文章會(huì)具體討論。

寫這樣的文章，一是想還原真實(shí)產(chǎn)品的設(shè)計(jì)，與開發(fā)的合作，現(xiàn)在重憶，也是一份美好；二是想表達(dá)，一個(gè)好設(shè)計(jì)不是隨便一做就有的，有無數(shù)版的改進(jìn)，花費(fèi)無數(shù)時(shí)間與精力，結(jié)合了團(tuán)隊(duì)大家的智慧，請(qǐng)看到文章的人們尊重設(shè)計(jì)師，及他們的勞動(dòng)成果，“隨便幫忙設(shè)計(jì)一個(gè)界面，設(shè)計(jì)一個(gè) logo” 這樣的請(qǐng)求還須慎重。

謝謝大家！ ??

作者：Juner UX，微信公眾號(hào)：君樂UX，個(gè)人設(shè)計(jì)網(wǎng)站：www.junerdesign.cn

本文由 @Juner UX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議