藍(lán)藍(lán)設(shè)計是一家做UE/UI設(shè)計的公司，我們常常接到的項目是大屏、pc端、手機(jī)端的項目要重新做交互設(shè)計和視覺設(shè)計。每個軟件首頁怎么設(shè)計？如何進(jìn)行首頁上的內(nèi)容取舍，最終客戶和上司是究竟想要什么？是客戶們（產(chǎn)品經(jīng)理或技術(shù)總監(jiān)）普遍感到為難的地方，希望有外部的專業(yè)設(shè)計力量來參與意見，多一份力量。
一般進(jìn)行軟件首頁的設(shè)計，我們先思考：
-
首頁要放什么內(nèi)容？哪些是核心的，用戶最在意、最常用的。
-
軟件產(chǎn)品提供什么樣的核心價值？
-
用戶常用的功能是哪些？
-
未來1到3年軟件會增加什么重要的功能？發(fā)展方向？
-
需要借助軟件產(chǎn)品傳達(dá)哪些企業(yè)價值觀？
-
在交互上和需求上先和軟件公司做一些交流，雙方達(dá)成一致再進(jìn)行。
我們也了解到，有許多軟件公司做這件事情（開發(fā)運營這個軟件或網(wǎng)站）已久，特別想找一個嶄新的方式去看待目前做的這件事。找個靠譜的外部設(shè)計公司和做用戶調(diào)研是兩個好方法。
我們建議如果時間充許的話，可以做做用戶調(diào)研，做8到10個用戶不同角色的訪談，從真正的客戶的角度去思考一下不同角色對這個產(chǎn)品的期待和理解。（訪談的人不用太多，因為太耗時間，但是可以多輪，一段時期一段時期不斷的去了解用戶的想法），從一線了解許多不同層次的想法和使用者的意見。 在和客戶的交流中，常常會遇到：改版會帶來多少程序方面的工作量這類的問題。這個擔(dān)心很多公司，特別是十年來在一直做著同一個產(chǎn)品的經(jīng)理們普遍反映都有，特別是很大型的軟件。 改版與否，其實取決于對空間秩序美的忍耐度及它能帶給你的價值。 就像有的人房間很亂，也不收拾，特別能忍。他省了整理的時間，但他個人可以找到自己的東西，有自己的內(nèi)在邏輯。但表現(xiàn)在工作上就是：界面很亂，除了開發(fā)者自己，客戶都找不到東西，很難使用，花了客戶很多時間去學(xué)習(xí)使用這個軟件，到了忍無可忍，客戶提出強烈不滿的時候，有可能危及到合作時，在吐槽中被迫進(jìn)行。 優(yōu)勢技術(shù)不等于優(yōu)勢產(chǎn)品，產(chǎn)品的需求和體驗要先于技術(shù)和模式而存在，品牌的戰(zhàn)略貫穿在企業(yè)的全鏈條中，以用戶可以感知的點滴來詮釋軟件產(chǎn)品核心價值，塑造品牌。 UI的設(shè)計能帶來的不僅僅是軟件的美化，UI咨詢公司能帶給客戶的是一種思考的方式和解決問題的行動力。軟件企業(yè)最好當(dāng)然是掌握市場先機(jī)，企業(yè)內(nèi)部里去觸發(fā)、驅(qū)動 ui咨詢類項目，在機(jī)會來了的時候才更從容。 對不熟悉的事情，大家總是會有一定的壓力，表現(xiàn)的行為方式上就會有點拖延，選擇決策困難。我在想，有時候我們的界面設(shè)計時間總是被擠壓的特別少，在功能都實現(xiàn)的情況下才來進(jìn)行，是不是也是出于客戶的這種心理呢？ 其實對于我們這樣一個做了界面設(shè)計十多年的設(shè)計公司而言，這些都是我們平常日常工作中的工作，沒有什么難點，只是要根據(jù)不同的公司，不同的產(chǎn)品去梳理清楚、理解業(yè)務(wù)，用心體會。 做好整個系統(tǒng)的交互設(shè)計，首頁的內(nèi)容布局設(shè)計，和進(jìn)行一個家庭的空間物品歸納整理沒有什么區(qū)別。不要陷入“要么不做，做就做到最好的”極端思維，只要馬上迭代改進(jìn)，平時保持一定的水準(zhǔn)，總會做的越來越好。1. 首先要考慮到家庭的空間有多少人要去使用，住幾個人？空間之間的最佳行動路徑。未來幾年內(nèi)人口會增加或減少嗎？住多久？2.了解你和家人所需要的物品，對它們進(jìn)行分類和預(yù)算了解，無用的物品斷舍離。3. 物品的使用場景在臥室里用，還是在客廳里看電視的時候用？服裝的裝搭是出門見客還是家居服，有多少件？對客戶來講最看重的是書柜還是衣帽間設(shè)計，還是廚房呢？因人而異，選擇對他最重要的物品和場景，好好的設(shè)計，創(chuàng)造最讓人感動的體驗。 這和產(chǎn)品的軟件界面設(shè)計其實是相通的：1. 了解就是這個系統(tǒng)有什么功能，準(zhǔn)備放到幾個導(dǎo)航菜單中？導(dǎo)航之間的最佳切換路徑。產(chǎn)品核心提供什么樣的價值？未來1到3年軟件會增加或減少什么重要的功能？產(chǎn)品未來的發(fā)展方向？這版用多久，多久改版一次？2. 把所有的功能進(jìn)行分類和預(yù)算，分版本陸續(xù)實現(xiàn)。斷舍離軟件功能，進(jìn)行取舍歸納。最常用的，重要的先做，花費精力太多，又很少用的功能舍掉或后做，3. 了解每一個功能的使用場景，是什么用戶角色使用？是在戶外或者室內(nèi)用？是日常工作時還是領(lǐng)導(dǎo)視查，開會時使用？他最關(guān)注什么？他的使用過程是什么？ 了解每一個功能的使用場景和用戶關(guān)聯(lián)時，可以畫出一個用戶體驗地圖幫助梳理思路。從使用這個軟件產(chǎn)品的開始到結(jié)束，不同接觸點，關(guān)鍵點列出來，選擇最需要改善的幾個重點，好好的設(shè)計開發(fā)，創(chuàng)造最讓人感動的體驗。 有了要表達(dá)的界面元素，把它們按照人類的使用習(xí)慣去組合，進(jìn)行這些頁面的內(nèi)容的排列方式就可以了，比如：
-
重要的內(nèi)容放在第一屏重要的地方，按照人類的閱讀習(xí)慣，從左到右，從上到下。重點的字大區(qū)塊占比大，非重點的弱化小字，歸納為一組，可隱藏。
-
用好對比，不要讓人思考，該提示的地方要提示（直接打開頁面時彈出或在需要提醒的位置附近，一個地兒一個地兒輪播閃現(xiàn)都可以），盡量傻瓜式的，不要讓人培訓(xùn)后才懂怎么使用（節(jié)省用戶時間）。
-
思考用戶第一次進(jìn)入軟件，如何引導(dǎo)他使用的流程和步驟，并在首頁就能開始第一步。（目前B端的產(chǎn)品常見問題就是功能橫向單一，每個功能一個菜單，之間缺乏串連使用的路徑，用戶根本不知道如何使用）
-
如果是工具類的操作軟件，在首頁要給足相應(yīng)的操作輔導(dǎo)文案和視頻。如果是辦公任務(wù)類軟件，在首頁要很明確展示要做的總數(shù)、待辦具體事情，想了解的信息。
空間（交互）布局設(shè)計好之后，易用性就基本已經(jīng)解決了。 剩下就是根據(jù)用戶不同的審美，巴洛克，簡潔風(fēng)，歐式，美式（簡約，科技感，質(zhì)感，時尚、擬物，酷炫，奢華高端，品牌VI、拙樸古風(fēng)），任客戶選擇，或者是根據(jù)用戶畫像的調(diào)查去推測，根據(jù)產(chǎn)品定位，建立色彩情緒板，研究出這個產(chǎn)品應(yīng)有的外貌。
我們藍(lán)藍(lán)設(shè)計一般是有一個UI設(shè)計調(diào)查表，把各種設(shè)計風(fēng)格和問題列出來，引導(dǎo)客戶在填表的過程中去選擇和思考。 只要您去做這件事，開始思考，最終就會知道界面那些功能該怎么擺放。我們的交流中往往發(fā)現(xiàn)客戶是非常有智慧的，一開始可能沒有想法，隨著分析和思考的深入，靈感受到啟發(fā)，等到我們設(shè)計出方案之后，很會挑方案，能夠感受到不同方案的優(yōu)點，把他們集中在一起。 最近流行一個新的職業(yè)，叫收納整理師，就是幫助陪伴您收拾家。不僅僅是打掃衛(wèi)生，還會告訴你一些斷舍離取舍原則。原有的衣柜空間有什么不足，改進(jìn)的方法，一些方便收納的小工具，手把手教你各類疊衣服的方法。有些工作（整理房間）自己也能做，但是這個工作太枯燥，工作量又很大，如果有人陪，就能夠被鼓勵著，開心，很有成就的去完成。
我覺得交互設(shè)計師也是在做整理收納這種事情。有些人最喜歡的買買買，買回了太多的東西，又無處安放，屋子變得很亂，開始收納整理，像不像軟件開發(fā)中一些客戶角色，喜歡加一些內(nèi)容（功能）？這個頁面加一點，那個頁面加一點，過了一陣子，這個軟件（網(wǎng)站）就變得不成樣子，需要維護(hù)和整理。
軟件產(chǎn)品和一個家一樣，他們都是你創(chuàng)造的，如果可以說話，他們可能有許多話想對你：“把我創(chuàng)造的美一些，整潔一些吧，主人” 下面給大家展示幾個實際的案例，我們是怎么從需求到原型，完成這項工作的，設(shè)計前后的效果如何? 就拿我們最近合作的江蘇銳創(chuàng)來講吧，這是一家非常優(yōu)秀的公司，江蘇銳創(chuàng)數(shù)據(jù)中心服務(wù)管理平臺項目，產(chǎn)品迭代速度非常快，公司內(nèi)部做過很多版本的設(shè)計，由于十年來一直在做這套軟件，產(chǎn)生了審美疲勞，不知道到底要怎么做才合適了。各種之前想過的東西都已經(jīng)自己練過了，也實施過了，但就是覺得沒有達(dá)到自己理想的狀態(tài)，內(nèi)部設(shè)計了一稿又一稿，總是覺得還不夠好。 使用這個軟件的用戶是企業(yè)中的網(wǎng)管和工程師，專業(yè)人士。在委托藍(lán)藍(lán)設(shè)計之前，內(nèi)部開發(fā)已經(jīng)迭代四次，企業(yè)內(nèi)部的交互設(shè)計師已經(jīng)把首頁要放的內(nèi)容思考的比較清楚了。在這類的需求中，藍(lán)藍(lán)設(shè)計的設(shè)計師主要的工作是優(yōu)化視覺設(shè)計和進(jìn)行交互設(shè)計的局部優(yōu)化處理，通過友好的交互體驗讓企業(yè)用戶享受到高品質(zhì)的服務(wù)。
設(shè)計后的效果圖
1. 理解用戶所需，優(yōu)化交互，增加部分內(nèi)容。告警事件除了原型中的時間線按順序發(fā)生外，加了用戶頭像，已處理、待處理、緊急任務(wù)統(tǒng)計數(shù)字，讓用戶可以總覽全局，做到對工作量心中有數(shù)。
2. 數(shù)據(jù)中心信息，秉承著信息簡單易懂，界面引導(dǎo)友好的理解，把信息分組，4個關(guān)鍵信息總數(shù)并列2排，設(shè)計了相應(yīng)的擬物化圖標(biāo)，美觀整理有秩序。在線和離線位數(shù)增加了表達(dá)當(dāng)前比例的橫向柱狀圖，用戶從綠色和紅色的區(qū)塊長短中可以輕松感知，比原型的表達(dá)方式又多了一個緯度。
3. 本機(jī)系統(tǒng)信息，將單個的數(shù)字轉(zhuǎn)化為儀表盤，可以表現(xiàn)出高中低預(yù)警和正常的多重含義。通過輕擬物的表現(xiàn)手法，增強駕駛艙的沉浸式體驗，營造中控管理氛圍的真實感。
4. 所有的設(shè)計，都是基于對業(yè)務(wù)的理解，回到本質(zhì)，思考用戶是否需要多層次信息的統(tǒng)計分析，不同的緯度呈現(xiàn)結(jié)果。最終以感性、直觀、優(yōu)美的方式視覺表達(dá)，并考慮到數(shù)據(jù)可視化的控件類型和實現(xiàn)難度。
中國移動愛流量App整體的設(shè)計提案，經(jīng)過用用戶研究分析、同類競爭App競品分析報告、產(chǎn)品定位、功能分析、交互設(shè)計、視覺設(shè)計。中國 移動只提供了運行中的上一版App，其它的調(diào)研、改版策劃由藍(lán)藍(lán)設(shè)計進(jìn)行。
這個案例比上一個案例更加整體，重大的項目應(yīng)該采用這種方式來進(jìn)行。
1 同類產(chǎn)品APP對比：
藍(lán)藍(lán)設(shè)計觀察了20家流量類的App。通過在應(yīng)用市場監(jiān)測流量平臺類app的下載量，我們選取以上三家為競品。
『流量寶』中國電信出品。
『流量銀行』中國聯(lián)通出品。
『流量來了』，世紀(jì)龍信息網(wǎng)絡(luò)有限責(zé)任公司出品。
分析內(nèi)容：
1. 界面布局對比
2. 核心功能對比
3. 色彩對比
4. 首頁印象對比
5. 界面設(shè)計優(yōu)缺點
2 產(chǎn)品洞察 明確產(chǎn)品的定位和發(fā)展方向
按照用戶對于流量的認(rèn)識、了解、使用的程度，通常流量經(jīng)營可以分為三個發(fā)展階段。
在流量消費培育階段(2008-2012年)，隨著智能手機(jī)的快速普及，客戶上網(wǎng)頻率逐漸加大，對于網(wǎng)絡(luò)的使用逐漸從PC互聯(lián)網(wǎng)向移動互聯(lián)網(wǎng)轉(zhuǎn)移，其標(biāo)志就是智能手機(jī)用戶在2013年超過了PC保有量。這個階段主要以前向流量客戶經(jīng)營為主，采取流量包月甚至流量免費等方式驅(qū)動流量增長。
在流量理性消費階段(2013-2014年)，流量消費習(xí)慣逐漸養(yǎng)成，運營商開始改變甚至取消流量包月無限量使用策略，用戶開始感受到流量的費用壓力，開始對自身的消費行為和內(nèi)容進(jìn)行整理，逐步回落到用戶能夠承受的流量消費水平。而流量經(jīng)營主要收入來源依然是個人客戶。
在流量后向經(jīng)營階段(2014年-)，隨著運營商發(fā)現(xiàn)流量收入增速放緩的現(xiàn)象，運營商開始嘗試定向流量、后向流量捆綁、流量800等面向后端企業(yè)的運營。至此，運營商正式邁入流量平臺化經(jīng)營時期。
產(chǎn)品不斷的迭代，使我們的產(chǎn)品在不斷的完善。 流量平臺的定位也在不斷的跟隨行業(yè)的變化在不斷的變化，才能使我們的產(chǎn)品得到用戶的認(rèn)可。
功能方向：使產(chǎn)品向貨幣化、社交化、媒介化轉(zhuǎn)變。
增加用戶使用率，創(chuàng)造可以長期登錄使用的情景和功能。
基于個人：監(jiān)測自己的手機(jī)流量及使用情況，提醒自己：少了可以買，也可以把多余的流量轉(zhuǎn)給家人、朋友、同學(xué)、或充入手機(jī)、
基于社交：比如：發(fā)紅包、賺流量、做任務(wù)、簽到送流量，流量兌話費等、是可以嘗試的方向，使我們的產(chǎn)品向貨幣化、社交化、媒介化轉(zhuǎn)變。
視覺方向：使我們的產(chǎn)品更加的年輕化、擁抱90、00后。
交互方向：減化路徑、清晰簡潔
3 基于產(chǎn)品分析策劃進(jìn)行主頁的交互設(shè)計
在不斷的思考、對功能的深入理解后，交互設(shè)計師對首頁構(gòu)圖了三個方案，希望能契合產(chǎn)品定位并在布局和表現(xiàn)形式上與競品區(qū)別，展現(xiàn)出愛流量的。
團(tuán)隊討論思考后，認(rèn)為將“流量監(jiān)測和流轉(zhuǎn)“做為首頁目前重點，賺流量做為以后發(fā)展點。確定第二種布局(中），進(jìn)行視覺設(shè)計。
4 視覺設(shè)計成果
主頁設(shè)計風(fēng)格確定后，就可以進(jìn)行其它頁面的視覺設(shè)計啦。
-
軟件的優(yōu)化設(shè)計是一個長久的的事，挑一些典型頁來設(shè)計是基礎(chǔ)的部分。
-
目前國內(nèi)都在進(jìn)行數(shù)字化升級進(jìn)程，這一二十年來，從不知UI為何物，到企業(yè)紛紛重視，每個企業(yè)都有自己的設(shè)計師，重點的項目再外包給專業(yè)公司。關(guān)注整個用戶體驗，用體驗地圖觸點做設(shè)計，在中小型的項目上存在認(rèn)識不夠或目前達(dá)不到應(yīng)有的預(yù)算和精度。未來發(fā)展中，相信會漸逐把重要軟件的整體用戶體驗設(shè)計、服務(wù)設(shè)計、品牌設(shè)計的融入做為增長點。
-
藍(lán)藍(lán)設(shè)計公司有一個群，每天都在分享好的UI設(shè)計，如果你有興趣，請報上姓名和公司職位，我們共同成長和學(xué)習(xí)。請加微信ben_lanlan, 標(biāo)注“想加入設(shè)計分享群”.
