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

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

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

一、改版的說明

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

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

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

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

問題 1：

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

問題 2：

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

問題 3：

下方信息流的展示過于混亂，樣式的應(yīng)用過于死板，沒有展示形式上的變化，是沒有向下瀏覽的動(dòng)力的，因?yàn)楦杏X看起來都是一樣的。

問題 4：

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

有了以上這些問題，就可以進(jìn)入界面的改動(dòng)了，更進(jìn)階的分析和思路我會(huì)在之后的分享中提。

二、改版的演示

改版首先是確定頁面的模塊順序和布局，因?yàn)槭茄菔景咐?，做太長不利于展示所以我會(huì)去掉下方的一些內(nèi)容，所以整理后的頁面布局如下：

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

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

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

調(diào)整 1：

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

調(diào)整 2：

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

調(diào)整 3：

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

調(diào)整 4：

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

調(diào)整 5：

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

調(diào)整 6：

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

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

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

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

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

結(jié)尾

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

答案是顯而易見的，在國內(nèi)市場高端的設(shè)計(jì)就是各家大廠國民級應(yīng)用的樣子，因?yàn)樗鼈兌际怯赡晷綆资f到上百萬的設(shè)計(jì)師們設(shè)計(jì)出來的、落地的成果。

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

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

我們下篇再賤～

作者：超人的電話亭