藍(lán)藍(lán)設(shè)計(jì)是一家做UE/UI設(shè)計(jì)的公司，我們常常接到的項(xiàng)目是大屏、pc端、手機(jī)端的項(xiàng)目要重新做交互設(shè)計(jì)和視覺設(shè)計(jì)。每個(gè)軟件首頁怎么設(shè)計(jì)？如何進(jìn)行首頁上的內(nèi)容取舍，最終客戶和上司是究竟想要什么？是客戶們（產(chǎn)品經(jīng)理或技術(shù)總監(jiān)）普遍感到為難的地方，希望有外部的專業(yè)設(shè)計(jì)力量來參與意見，多一份力量。

一般進(jìn)行軟件首頁的設(shè)計(jì)，我們先思考：

• 首頁要放什么內(nèi)容？哪些是核心的，用戶最在意、最常用的。

• 軟件產(chǎn)品提供什么樣的核心價(jià)值？

• 用戶常用的功能是哪些？

• 未來1到3年軟件會(huì)增加什么重要的功能？發(fā)展方向？

• 需要借助軟件產(chǎn)品傳達(dá)哪些企業(yè)價(jià)值觀？

• 在交互上和需求上先和軟件公司做一些交流，雙方達(dá)成一致再進(jìn)行。

      我們也了解到，有許多軟件公司做這件事情（開發(fā)運(yùn)營(yíng)這個(gè)軟件或網(wǎng)站）已久，特別想找一個(gè)嶄新的方式去看待目前做的這件事。找個(gè)靠譜的外部設(shè)計(jì)公司和做用戶調(diào)研是兩個(gè)好方法。

      我們建議如果時(shí)間充許的話，可以做做用戶調(diào)研，做8到10個(gè)用戶不同角色的訪談，從真正的客戶的角度去思考一下不同角色對(duì)這個(gè)產(chǎn)品的期待和理解。（訪談的人不用太多，因?yàn)樘臅r(shí)間，但是可以多輪，一段時(shí)期一段時(shí)期不斷的去了解用戶的想法），從一線了解許多不同層次的想法和使用者的意見。

      在和客戶的交流中，常常會(huì)遇到：改版會(huì)帶來多少程序方面的工作量這類的問題。這個(gè)擔(dān)心很多公司，特別是十年來在一直做著同一個(gè)產(chǎn)品的經(jīng)理們普遍反映都有，特別是很大型的軟件。

      其實(shí)，下決定最難。

      改版與否，其實(shí)取決于對(duì)空間秩序美的忍耐度及它能帶給你的價(jià)值。

      就像有的人房間很亂，也不收拾，特別能忍。他省了整理的時(shí)間，但他個(gè)人可以找到自己的東西，有自己的內(nèi)在邏輯。但表現(xiàn)在工作上就是：界面很亂，除了開發(fā)者自己，客戶都找不到東西，很難使用，花了客戶很多時(shí)間去學(xué)習(xí)使用這個(gè)軟件，到了忍無可忍，客戶提出強(qiáng)烈不滿的時(shí)候，有可能危及到合作時(shí)，在吐槽中被迫進(jìn)行。

      優(yōu)勢(shì)技術(shù)不等于優(yōu)勢(shì)產(chǎn)品，產(chǎn)品的需求和體驗(yàn)要先于技術(shù)和模式而存在，品牌的戰(zhàn)略貫穿在企業(yè)的全鏈條中，以用戶可以感知的點(diǎn)滴來詮釋軟件產(chǎn)品核心價(jià)值，塑造品牌。

      UI的設(shè)計(jì)能帶來的不僅僅是軟件的美化，UI咨詢公司能帶給客戶的是一種思考的方式和解決問題的行動(dòng)力。軟件企業(yè)最好當(dāng)然是掌握市場(chǎng)先機(jī)，企業(yè)內(nèi)部里去觸發(fā)、驅(qū)動(dòng)  ui咨詢類項(xiàng)目，在機(jī)會(huì)來了的時(shí)候才更從容。

      對(duì)不熟悉的事情，大家總是會(huì)有一定的壓力，表現(xiàn)的行為方式上就會(huì)有點(diǎn)拖延，選擇決策困難。我在想，有時(shí)候我們的界面設(shè)計(jì)時(shí)間總是被擠壓的特別少，在功能都實(shí)現(xiàn)的情況下才來進(jìn)行，是不是也是出于客戶的這種心理呢？

      其實(shí)對(duì)于我們這樣一個(gè)做了界面設(shè)計(jì)十多年的設(shè)計(jì)公司而言，這些都是我們平常日常工作中的工作，沒有什么難點(diǎn)，只是要根據(jù)不同的公司，不同的產(chǎn)品去梳理清楚、理解業(yè)務(wù)，用心體會(huì)。

      做好整個(gè)系統(tǒng)的交互設(shè)計(jì)，首頁的內(nèi)容布局設(shè)計(jì)，和進(jìn)行一個(gè)家庭的空間物品歸納整理沒有什么區(qū)別。不要陷入“要么不做，做就做到最好的”極端思維，只要馬上迭代改進(jìn)，平時(shí)保持一定的水準(zhǔn)，總會(huì)做的越來越好。

家庭裝修和軟件界面設(shè)計(jì)的對(duì)比：

家庭要裝修

1. 首先要考慮到家庭的空間有多少人要去使用，住幾個(gè)人？空間之間的最佳行動(dòng)路徑。未來幾年內(nèi)人口會(huì)增加或減少嗎？住多久？

2.了解你和家人所需要的物品，對(duì)它們進(jìn)行分類和預(yù)算了解，無用的物品斷舍離。

3. 物品的使用場(chǎng)景在臥室里用，還是在客廳里看電視的時(shí)候用？服裝的裝搭是出門見客還是家居服，有多少件？對(duì)客戶來講最看重的是書柜還是衣帽間設(shè)計(jì)，還是廚房呢？因人而異，選擇對(duì)他最重要的物品和場(chǎng)景，好好的設(shè)計(jì)，創(chuàng)造最讓人感動(dòng)的體驗(yàn)。

交互設(shè)計(jì)有點(diǎn)像居室空間的規(guī)劃

        這和產(chǎn)品的軟件界面設(shè)計(jì)其實(shí)是相通的：

1. 了解就是這個(gè)系統(tǒng)有什么功能，準(zhǔn)備放到幾個(gè)導(dǎo)航菜單中？導(dǎo)航之間的最佳切換路徑。產(chǎn)品核心提供什么樣的價(jià)值？未來1到3年軟件會(huì)增加或減少什么重要的功能？產(chǎn)品未來的發(fā)展方向？這版用多久，多久改版一次？

2. 把所有的功能進(jìn)行分類和預(yù)算，分版本陸續(xù)實(shí)現(xiàn)。斷舍離軟件功能，進(jìn)行取舍歸納。最常用的，重要的先做，花費(fèi)精力太多，又很少用的功能舍掉或后做，

3. 了解每一個(gè)功能的使用場(chǎng)景，是什么用戶角色使用？是在戶外或者室內(nèi)用？是日常工作時(shí)還是領(lǐng)導(dǎo)視查，開會(huì)時(shí)使用？他最關(guān)注什么？他的使用過程是什么？

      了解每一個(gè)功能的使用場(chǎng)景和用戶關(guān)聯(lián)時(shí)，可以畫出一個(gè)用戶體驗(yàn)地圖幫助梳理思路。從使用這個(gè)軟件產(chǎn)品的開始到結(jié)束，不同接觸點(diǎn)，關(guān)鍵點(diǎn)列出來，選擇最需要改善的幾個(gè)重點(diǎn)，好好的設(shè)計(jì)開發(fā)，創(chuàng)造最讓人感動(dòng)的體驗(yàn)。

      有了要表達(dá)的界面元素，把它們按照人類的使用習(xí)慣去組合，進(jìn)行這些頁面的內(nèi)容的排列方式就可以了，比如：

• 重要的內(nèi)容放在第一屏重要的地方，按照人類的閱讀習(xí)慣，從左到右，從上到下。重點(diǎn)的字大區(qū)塊占比大，非重點(diǎn)的弱化小字，歸納為一組，可隱藏。
• 用好對(duì)比，不要讓人思考，該提示的地方要提示（直接打開頁面時(shí)彈出或在需要提醒的位置附近，一個(gè)地兒一個(gè)地兒輪播閃現(xiàn)都可以），盡量傻瓜式的，不要讓人培訓(xùn)后才懂怎么使用（節(jié)省用戶時(shí)間）。
• 思考用戶第一次進(jìn)入軟件，如何引導(dǎo)他使用的流程和步驟，并在首頁就能開始第一步。（目前B端的產(chǎn)品常見問題就是功能橫向單一，每個(gè)功能一個(gè)菜單，之間缺乏串連使用的路徑，用戶根本不知道如何使用）
• 如果是工具類的操作軟件，在首頁要給足相應(yīng)的操作輔導(dǎo)文案和視頻。如果是辦公任務(wù)類軟件，在首頁要很明確展示要做的總數(shù)、待辦具體事情，想了解的信息。

      空間（交互）布局設(shè)計(jì)好之后，易用性就基本已經(jīng)解決了。

      剩下就是根據(jù)用戶不同的審美，巴洛克，簡(jiǎn)潔風(fēng)，歐式，美式（簡(jiǎn)約，科技感，質(zhì)感，時(shí)尚、擬物，酷炫，奢華高端，品牌VI、拙樸古風(fēng)），任客戶選擇，或者是根據(jù)用戶畫像的調(diào)查去推測(cè)，根據(jù)產(chǎn)品定位，建立色彩情緒板，研究出這個(gè)產(chǎn)品應(yīng)有的外貌。

      我們藍(lán)藍(lán)設(shè)計(jì)一般是有一個(gè)UI設(shè)計(jì)調(diào)查表，把各種設(shè)計(jì)風(fēng)格和問題列出來，引導(dǎo)客戶在填表的過程中去選擇和思考。

       步步分解之后，工作就會(huì)好理解并逐漸輕松。

      只要您去做這件事，開始思考，最終就會(huì)知道界面那些功能該怎么擺放。我們的交流中往往發(fā)現(xiàn)客戶是非常有智慧的，一開始可能沒有想法，隨著分析和思考的深入，靈感受到啟發(fā)，等到我們?cè)O(shè)計(jì)出方案之后，很會(huì)挑方案，能夠感受到不同方案的優(yōu)點(diǎn)，把他們集中在一起。

      最近流行一個(gè)新的職業(yè)，叫收納整理師，就是幫助陪伴您收拾家。不僅僅是打掃衛(wèi)生，還會(huì)告訴你一些斷舍離取舍原則。原有的衣柜空間有什么不足，改進(jìn)的方法，一些方便收納的小工具，手把手教你各類疊衣服的方法。有些工作（整理房間）自己也能做，但是這個(gè)工作太枯燥，工作量又很大，如果有人陪，就能夠被鼓勵(lì)著，開心，很有成就的去完成。

      陪伴這個(gè)詞很重要，代表著共同參與，相伴成長(zhǎng)。

      我覺得交互設(shè)計(jì)師也是在做整理收納這種事情。有些人最喜歡的買買買，買回了太多的東西，又無處安放，屋子變得很亂，開始收納整理，像不像軟件開發(fā)中一些客戶角色，喜歡加一些內(nèi)容（功能）？這個(gè)頁面加一點(diǎn)，那個(gè)頁面加一點(diǎn)，過了一陣子，這個(gè)軟件（網(wǎng)站）就變得不成樣子，需要維護(hù)和整理。

       軟件產(chǎn)品和一個(gè)家一樣，他們都是你創(chuàng)造的，如果可以說話，他們可能有許多話想對(duì)你：“把我創(chuàng)造的美一些，整潔一些吧，主人”

      下面給大家展示幾個(gè)實(shí)際的案例，我們是怎么從需求到原型，完成這項(xiàng)工作的，設(shè)計(jì)前后的效果如何?

      就拿我們最近合作的江蘇銳創(chuàng)來講吧，這是一家非常優(yōu)秀的公司，江蘇銳創(chuàng)數(shù)據(jù)中心服務(wù)管理平臺(tái)項(xiàng)目，產(chǎn)品迭代速度非?？欤緝?nèi)部做過很多版本的設(shè)計(jì)，由于十年來一直在做這套軟件，產(chǎn)生了審美疲勞，不知道到底要怎么做才合適了。各種之前想過的東西都已經(jīng)自己練過了，也實(shí)施過了，但就是覺得沒有達(dá)到自己理想的狀態(tài)，內(nèi)部設(shè)計(jì)了一稿又一稿，總是覺得還不夠好。

      使用這個(gè)軟件的用戶是企業(yè)中的網(wǎng)管和工程師，專業(yè)人士。在委托藍(lán)藍(lán)設(shè)計(jì)之前，內(nèi)部開發(fā)已經(jīng)迭代四次，企業(yè)內(nèi)部的交互設(shè)計(jì)師已經(jīng)把首頁要放的內(nèi)容思考的比較清楚了。在這類的需求中，藍(lán)藍(lán)設(shè)計(jì)的設(shè)計(jì)師主要的工作是優(yōu)化視覺設(shè)計(jì)和進(jìn)行交互設(shè)計(jì)的局部?jī)?yōu)化處理，通過友好的交互體驗(yàn)讓企業(yè)用戶享受到高品質(zhì)的服務(wù)。

客戶給的原型圖

設(shè)計(jì)后的效果圖

1. 理解用戶所需，優(yōu)化交互，增加部分內(nèi)容。告警事件除了原型中的時(shí)間線按順序發(fā)生外，加了用戶頭像，已處理、待處理、緊急任務(wù)統(tǒng)計(jì)數(shù)字，讓用戶可以總覽全局，做到對(duì)工作量心中有數(shù)。

---

2. 數(shù)據(jù)中心信息，秉承著信息簡(jiǎn)單易懂，界面引導(dǎo)友好的理解，把信息分組，4個(gè)關(guān)鍵信息總數(shù)并列2排，設(shè)計(jì)了相應(yīng)的擬物化圖標(biāo)，美觀整理有秩序。在線和離線位數(shù)增加了表達(dá)當(dāng)前比例的橫向柱狀圖，用戶從綠色和紅色的區(qū)塊長(zhǎng)短中可以輕松感知，比原型的表達(dá)方式又多了一個(gè)緯度。

---

3. 本機(jī)系統(tǒng)信息，將單個(gè)的數(shù)字轉(zhuǎn)化為儀表盤，可以表現(xiàn)出高中低預(yù)警和正常的多重含義。通過輕擬物的表現(xiàn)手法，增強(qiáng)駕駛艙的沉浸式體驗(yàn)，營(yíng)造中控管理氛圍的真實(shí)感。

---

4. 所有的設(shè)計(jì)，都是基于對(duì)業(yè)務(wù)的理解，回到本質(zhì)，思考用戶是否需要多層次信息的統(tǒng)計(jì)分析，不同的緯度呈現(xiàn)結(jié)果。最終以感性、直觀、優(yōu)美的方式視覺表達(dá)，并考慮到數(shù)據(jù)可視化的控件類型和實(shí)現(xiàn)難度。

---

       中國移動(dòng)愛流量App整體的設(shè)計(jì)提案，經(jīng)過用用戶研究分析、同類競(jìng)爭(zhēng)App競(jìng)品分析報(bào)告、產(chǎn)品定位、功能分析、交互設(shè)計(jì)、視覺設(shè)計(jì)。中國 移動(dòng)只提供了運(yùn)行中的上一版App，其它的調(diào)研、改版策劃由藍(lán)藍(lán)設(shè)計(jì)進(jìn)行。

這個(gè)案例比上一個(gè)案例更加整體，重大的項(xiàng)目應(yīng)該采用這種方式來進(jìn)行。

1   同類產(chǎn)品APP對(duì)比：

藍(lán)藍(lán)設(shè)計(jì)觀察了20家流量類的App。通過在應(yīng)用市場(chǎng)監(jiān)測(cè)流量平臺(tái)類app的下載量，我們選取以上三家為競(jìng)品。

『流量寶』中國電信出品。

『流量銀行』中國聯(lián)通出品。

『流量來了』，世紀(jì)龍信息網(wǎng)絡(luò)有限責(zé)任公司出品。

分析內(nèi)容：

1. 界面布局對(duì)比

2. 核心功能對(duì)比

3. 色彩對(duì)比

4. 首頁印象對(duì)比

5. 界面設(shè)計(jì)優(yōu)缺點(diǎn)

2 產(chǎn)品洞察 明確產(chǎn)品的定位和發(fā)展方向

按照用戶對(duì)于流量的認(rèn)識(shí)、了解、使用的程度，通常流量經(jīng)營(yíng)可以分為三個(gè)發(fā)展階段。

在流量消費(fèi)培育階段(2008-2012年)，隨著智能手機(jī)的快速普及，客戶上網(wǎng)頻率逐漸加大，對(duì)于網(wǎng)絡(luò)的使用逐漸從PC互聯(lián)網(wǎng)向移動(dòng)互聯(lián)網(wǎng)轉(zhuǎn)移，其標(biāo)志就是智能手機(jī)用戶在2013年超過了PC保有量。這個(gè)階段主要以前向流量客戶經(jīng)營(yíng)為主，采取流量包月甚至流量免費(fèi)等方式驅(qū)動(dòng)流量增長(zhǎng)。

在流量理性消費(fèi)階段(2013-2014年)，流量消費(fèi)習(xí)慣逐漸養(yǎng)成，運(yùn)營(yíng)商開始改變甚至取消流量包月無限量使用策略，用戶開始感受到流量的費(fèi)用壓力，開始對(duì)自身的消費(fèi)行為和內(nèi)容進(jìn)行整理，逐步回落到用戶能夠承受的流量消費(fèi)水平。而流量經(jīng)營(yíng)主要收入來源依然是個(gè)人客戶。

在流量后向經(jīng)營(yíng)階段(2014年-)，隨著運(yùn)營(yíng)商發(fā)現(xiàn)流量收入增速放緩的現(xiàn)象，運(yùn)營(yíng)商開始嘗試定向流量、后向流量捆綁、流量800等面向后端企業(yè)的運(yùn)營(yíng)。至此，運(yùn)營(yíng)商正式邁入流量平臺(tái)化經(jīng)營(yíng)時(shí)期。

產(chǎn)品不斷的迭代，使我們的產(chǎn)品在不斷的完善。 流量平臺(tái)的定位也在不斷的跟隨行業(yè)的變化在不斷的變化，才能使我們的產(chǎn)品得到用戶的認(rèn)可。

功能方向：使產(chǎn)品向貨幣化、社交化、媒介化轉(zhuǎn)變。

增加用戶使用率，創(chuàng)造可以長(zhǎng)期登錄使用的情景和功能。

基于個(gè)人：監(jiān)測(cè)自己的手機(jī)流量及使用情況，提醒自己：少了可以買，也可以把多余的流量轉(zhuǎn)給家人、朋友、同學(xué)、或充入手機(jī)、

基于社交：比如：發(fā)紅包、賺流量、做任務(wù)、簽到送流量，流量?jī)对捹M(fèi)等、是可以嘗試的方向，使我們的產(chǎn)品向貨幣化、社交化、媒介化轉(zhuǎn)變。

視覺方向：使我們的產(chǎn)品更加的年輕化、擁抱90、00后。

交互方向：減化路徑、清晰簡(jiǎn)潔

3 基于產(chǎn)品分析策劃進(jìn)行主頁的交互設(shè)計(jì)

在不斷的思考、對(duì)功能的深入理解后，交互設(shè)計(jì)師對(duì)首頁構(gòu)圖了三個(gè)方案，希望能契合產(chǎn)品定位并在布局和表現(xiàn)形式上與競(jìng)品區(qū)別，展現(xiàn)出愛流量的。

團(tuán)隊(duì)討論思考后，認(rèn)為將“流量監(jiān)測(cè)和流轉(zhuǎn)“做為首頁目前重點(diǎn)，賺流量做為以后發(fā)展點(diǎn)。確定第二種布局(中），進(jìn)行視覺設(shè)計(jì)。 

4 視覺設(shè)計(jì)成果

主頁設(shè)計(jì)風(fēng)格確定后，就可以進(jìn)行其它頁面的視覺設(shè)計(jì)啦。

---

1. 軟件的優(yōu)化設(shè)計(jì)是一個(gè)長(zhǎng)久的的事，挑一些典型頁來設(shè)計(jì)是基礎(chǔ)的部分。

2. 目前國內(nèi)都在進(jìn)行數(shù)字化升級(jí)進(jìn)程，這一二十年來，從不知UI為何物，到企業(yè)紛紛重視，每個(gè)企業(yè)都有自己的設(shè)計(jì)師，重點(diǎn)的項(xiàng)目再外包給專業(yè)公司。關(guān)注整個(gè)用戶體驗(yàn)，用體驗(yàn)地圖觸點(diǎn)做設(shè)計(jì)，在中小型的項(xiàng)目上存在認(rèn)識(shí)不夠或目前達(dá)不到應(yīng)有的預(yù)算和精度。未來發(fā)展中，相信會(huì)漸逐把重要軟件的整體用戶體驗(yàn)設(shè)計(jì)、服務(wù)設(shè)計(jì)、品牌設(shè)計(jì)的融入做為增長(zhǎng)點(diǎn)。

3. 藍(lán)藍(lán)設(shè)計(jì)公司有一個(gè)群，每天都在分享好的UI設(shè)計(jì)，如果你有興趣，請(qǐng)報(bào)上姓名和公司職位，我們共同成長(zhǎng)和學(xué)習(xí)。請(qǐng)加微信ben_lanlan, 標(biāo)注“想加入設(shè)計(jì)分享群”.