最近要做個比較系統(tǒng)的改版作為內(nèi)部的課題，包含 PC 端到移動端，以及體驗、交互、視覺的分析和調(diào)整，讓大家更好的認識體驗和交互的項目流程和思路是什么樣的，最后在落地和輸出時要添加什么內(nèi)容。

重的內(nèi)容和復(fù)雜的分析我會后面再分享，今天先從一個簡單的主題入手——Steam的APP主頁設(shè)計改版。

建議盡量先自己用一用 Steam 的 APP，會對后面的分析點有更好的認識，下面是首頁的部分截圖，先看下目前版本的樣式，自己思考下如何優(yōu)化：

一、改版的說明

本次主題作為小型的改版，重點針對新手作品集應(yīng)該放什么界面，怎么優(yōu)化的難點出發(fā)的。不管是你自己過去做的項目，還是做的練習(xí)改版，在界面的都要滿足最起碼的設(shè)計要求 —— 能看。

而很多原先項目的界面做的非常奇怪、不合理，在放進作品集前，都有必要進行重新優(yōu)化。

雖然部分奇怪的設(shè)計可能由業(yè)務(wù)、領(lǐng)導(dǎo)、歷史引發(fā)，但對于看的人來講是不會想去理解背后原因的（尤其是初級設(shè)計市場），只會在意最終表現(xiàn)的效果低于平均值，認為設(shè)計師的水平不行。

回到上面的界面中來，官方的設(shè)計是絕對稱不上合理的（不接受任何反駁），存在的問題很多，下面就做個簡單的分析說明：

問題 1：

頂部的欄目非常浪費空間，菜單展開是用于篩選首頁顯示內(nèi)容的，這個名字就沒辦法理解功能的意義，且錢包的放置位置很突兀，以一個 Steam 充值超過 2w 的重度用戶來講，看到移動端展示余額一頭霧水，畢竟這不是一個資產(chǎn)管理應(yīng)用。

問題 2：

首屏?xí)兄黝}特賣活動，但是結(jié)合得非常不好，既不能營造活動的氛圍，又不能很好解釋關(guān)聯(lián)游戲商品是什么。且首屏游戲卡片只有一張封面圖片，要點擊后才能看見對應(yīng)信息是非常不合理的，尤其是在國區(qū)，看不懂英文標題，而且不熟悉的游戲也不知道是什么類型，根本不會感興趣。

問題 3：

下方信息流的展示過于混亂，樣式的應(yīng)用過于死板，沒有展示形式上的變化，是沒有向下瀏覽的動力的，因為感覺看起來都是一樣的。

問題 4：

底部導(dǎo)航選項并不是特別符合用戶需要，沒有標題的做法在這個場景里很不合適，尤其首頁用標簽來表示是無法理解的。

有了以上這些問題，就可以進入界面的改動了，更進階的分析和思路我會在之后的分享中提。

二、改版的演示

改版首先是確定頁面的模塊順序和布局，因為是演示案例，做太長不利于展示所以我會去掉下方的一些內(nèi)容，所以整理后的頁面布局如下：

1. 頂部欄：分頁器（商店、愿望清單、新聞）、錢包、我的、搜索欄
2. 首屏活動展示：活動背景、主推商品
3. 次要活動推薦列表
4. Steam 禮品卡
5. 按類別瀏覽快速入口：角色、動作、戰(zhàn)略……
6. 精選系列作品
7. 回顧過去的一年
8. 基于玩過游戲的推薦：游戲 1、游戲 2、游戲 3
9. 探索隊列
10. 商品流：熱銷、超值、DLC、低于 40

整理完內(nèi)容的順序，然后就可以快速搭建原型。下面是原型的方案：

在不以“花里胡哨”的界面視覺為輸出目標的話，視覺就要通過布局和結(jié)構(gòu)的合理性取勝，這里面要花的時間是最多的，思路也要最清晰的，才能為后面建立合理的設(shè)計解釋。

調(diào)整 1：

頂部改動，將菜單改成“商店”，或者推薦也可以，然后和其它兩個選項組成分頁器，可以左右滑動切換頁面。然后錢包作為圖標放右側(cè)去，搜索單獨做成一行。

調(diào)整 2：

頂部活動公告全屏化，增加活動氛圍，并且增加推薦商品的標題，以及推薦商品的相關(guān)解釋露出，引導(dǎo)用戶點擊。

調(diào)整 3：

按類別瀏覽調(diào)整樣式，增加露出選項數(shù)量，減少左右滾動的長度。

調(diào)整 4：

精選系列樣式調(diào)整，增加更多的系列解釋信息，提高專題合集的特性。

調(diào)整 5：

合并下方內(nèi)容成為一個列表，讓感興趣的用戶自己去切換并無限瀏覽，減少到達底部內(nèi)容的高度。

調(diào)整 6：

優(yōu)化底部導(dǎo)航，增加標題，突出打開 APP 最常用的掃碼登錄按鈕。

以上的原型做好，而且邏輯自己想明白以后，就可以進行最后的視覺處理了，可以說最后的處理就是按最基礎(chǔ)的方式添加色彩，圖片，圖標。尤其是內(nèi)容包含豐富的游戲封面、圖片來支撐畫面的色彩豐富性，更不需要去制作一大堆的復(fù)雜樣式，所以要用合理的布局去更好的發(fā)揮這些優(yōu)點。

最終的設(shè)計效果如下：

總結(jié)一遍，很多做的很奇怪的設(shè)計，不是要把它們改的非常突出才叫優(yōu)化，想要做的越用力，結(jié)果就越奇怪。

當(dāng)自己能力不足以駕馭非常復(fù)雜的設(shè)計時，使用常規(guī)、常見的樣式來制作，就能獲得比原先好得多的結(jié)果，這也是優(yōu)化。

結(jié)尾

初級 UI 設(shè)計師學(xué)習(xí)的問題就是總想把步子跨的過大，缺乏對 “有效設(shè)計” 的正確認識。比如學(xué)員經(jīng)常會問什么是優(yōu)秀的 UI 設(shè)計，要如何借鑒。

答案是顯而易見的，在國內(nèi)市場高端的設(shè)計就是各家大廠國民級應(yīng)用的樣子，因為它們都是由年薪幾十萬到上百萬的設(shè)計師們設(shè)計出來的、落地的成果。

雖然很多人會看不上，但大多數(shù)作品集表現(xiàn)出來的成果還是遠遠比不上這些經(jīng)過無數(shù)損耗和內(nèi)耗的線上案例，你得先能達到相同的輸出水平，才能談超越，才能談個性。

下一篇我們就會進一步來分享和體驗、交互有關(guān)的分析和解釋了。

我們下篇再賤～

作者：超人的電話亭