那么收到小伙伴們的作業(yè)，我們一起來看看有沒有什么問題，希望可以幫助大家解決一些問題。

案例1: 個人中心

從提交的這張UI界面來分析，先看一下整體，我們利用模塊覆蓋法來將頁面的內(nèi)容區(qū)分一下：

 

 

我們發(fā)現(xiàn)頂部的內(nèi)容在整體視覺上比較擁擠，并且信息比較散，所以我們要對頂部這塊內(nèi)容再拆分重組一下。這里他將數(shù)字部分內(nèi)容整合到了左側(cè)，但是這樣會讓左側(cè)內(nèi)容過于擁擠，而且右側(cè)區(qū)域只有一個圖標是達不到平衡的效果，雖然放了標簽，但是標簽和人的關(guān)聯(lián)性還是差了一些，所以標簽要么跟頭像要么跟名字，而不要躲在角落里。

 

 

另外數(shù)字的字體使用也會有一種被擠扁的感受，這里不建議用這樣很瘦的字體。并且這里其實他將點贊和收藏一起收了起來可能是因為左側(cè)放不下了，那么我們直接就另一起一行放數(shù)字新信息即可。這樣名字與頭像和平衡對稱，數(shù)字又可以水平平均鋪開，這是一種常規(guī)的處理方法。

其次，整個版面白色區(qū)域較多，那么中間的開通會員卡片的色彩就過于重了，雖然我們需要引導(dǎo)用戶去開通，但是視覺上給人感知太強烈，就感覺有點突兀。

 

 

個人中心其實更多的是展示與我相關(guān)的信息和內(nèi)容，目前大部分產(chǎn)品的設(shè)計風格也都是以簡潔為主，所以我們也盡可能的利用到這點?？ㄆ逶谥虚g是個不錯的想法，但是一般我們在做UI設(shè)計的時候?qū)蛹壸龀?層及3層以內(nèi)即可，不要出現(xiàn)第四層。

3層指的是：背景層、內(nèi)容層、懸浮層/疊加層，如果一個界面中出現(xiàn)4層，會導(dǎo)致界面的層級過多，信息就較為復(fù)雜，所以這個界面中，收藏夾一欄的卡片是不需要加投影的，只需要圖標加文字的上下排列即可。

 

 

接下去，下方的功能列表在瀏覽上效率過低，我們看到要瀏覽完這列信息我們視線需要折行，并且這些功能是不需要都放在頁面下方去堆疊，其實頂部導(dǎo)航欄也是可以利用起來的，由于這是一款美食類的產(chǎn)品，用戶很多時候也會在個人中心去搜索我創(chuàng)建的食譜、作品等內(nèi)容，所以像搜索和消息可以直接放在導(dǎo)航欄，而設(shè)置和關(guān)于這些較低頻的操作就可以合并起來，那么原來6行列表就變?yōu)榱?行，那這四行內(nèi)容我們可以直接用橫向排列的形式去做了。

 

 

那么最后，如果要對界面做視覺上的優(yōu)化，我們要對信息重新排版、圖標進行重新設(shè)計，在原圖中我覺得底部中間的圖標還是具有品牌特征的，那么我們就把這個品牌特征拿過來，作為一個輔助圖形，這個輔助圖形就可以用在小標簽和卡片背景的修飾中。

 

 

很多新人設(shè)計師在做UI界面的時候就會不知道應(yīng)該放什么信息上去。所以要明白的是這個信息能告訴用戶什么，用戶能通過這個信息判斷什么，用戶的瀏覽順序和重點在哪里?

好了，再強調(diào)一遍，當你設(shè)計完一個UI界面的時候，先問一下自己這4個問題：

這個界面告訴用戶哪些信息

用戶能否通過這些信息判斷自己是否要繼續(xù)任務(wù)流程

界面的瀏覽順序是怎樣的

信息展示的重點和次要點是否展示合理

接下來講兩個案例：

案例2: pc端遷移移動端案例

第一次從pc端遷移過來的同學(xué)會有這幾個問題，同樣的界面信息和內(nèi)容如果要完全保留的遷移到移動端應(yīng)該怎么設(shè)計，一個界面放不了那么多內(nèi)容。比如我們先來看這個這個卡片列表：

 

 

這個列表的信息很有pc端的特點，這位同學(xué)其實是有意識的將重要信息強化了，但是pc端到移動端我們是可以簡化很多信息和細節(jié)的，另外在用戶瀏覽的路徑上也會有不同。

那我們看到這個卡片中的信息，從上往下依次瀏覽好像并沒有問題，但就是因為沒有問題，這才是問題。類似這樣的信息卡片，其實如果按照這樣排，那么用戶就會瀏覽完所有信息再做決策，而我們知道的是并不是所有信息都需要讓用戶去關(guān)注到，例如最終要的是標題、狀態(tài)和查看軌跡，而不重要的是工單和創(chuàng)建時間。

怎么判斷重不重要呢?一個是用戶查看和操作的頻率，另外就是業(yè)務(wù)側(cè)的側(cè)重點。這邊為了隱藏一些敏感信息某些文案就處理了一下，大家可以看一下我們方案的前后對比。

這里沒有刪減任何信息，因為確實在業(yè)務(wù)方面需要某些信息，但是像“創(chuàng)建時間”“查看軌跡”“當前狀態(tài)”這些是沒有必要的文案就可以省略。而卡片的狀態(tài)一般在移動端上會放在右上角顯示，并且在移動端中不需要加圖標做修飾。

在原來的卡片中，如果我們要根據(jù)創(chuàng)建時間去找的話，因為工單、創(chuàng)建、狀態(tài)3行文字有點類似，所以會導(dǎo)致尋找效率不高，那么我們就講工單還有時間分開放置，在滾動瀏覽的時候可以更好的尋找。

 

 

而查看軌跡按鈕我還是去掉了，考慮到的既然這里是軌跡軌跡訂單列表那么用戶就知道進來是要查看軌跡的，所以不需要全部在卡片中給按鈕，這個也是web和移動端的區(qū)別，移動端的卡片是可以整體點擊的，就和電商的訂單列表、提現(xiàn)記錄等卡片列表一樣的都可以點進詳情，而web中的卡片則不行，所以用戶在這里反正需要點擊一次，那么這里就不需要給一個軌跡按鈕，還顯得更復(fù)雜。

再來講個案例，相信很多同學(xué)在pc端的b端設(shè)計中遇到過這樣的問題，就是很多表格類的信息在web端可以一屏放下，到移動端就放不下了，那該怎么去做。其實如果你們可以去參考阿里云的app，類似于這樣pc端b端的移植到移動端來說，也只能部分移植。

 

 

因為移動端的導(dǎo)航太有限了，像pc端左側(cè)和頂部的篩選控件可以放多層聯(lián)動，并且橫向可以展開更多的標簽，但是移動端橫線太受限了，大家可以看一下如果我們真的要整體遷移的話就會變成以下這樣的情況，但是移動端的核心的方便快捷，并不適合那么復(fù)雜的內(nèi)容在一個界面去進行交互流轉(zhuǎn)，所以左側(cè)縱向tab導(dǎo)航不會出現(xiàn)下拉展開的二級聯(lián)動。

 

 

所以大家?guī)缀鯖]有看到過最后那樣的終極形態(tài)，因為實在太復(fù)雜了，但是如果講左側(cè)的縱向?qū)Ш饺サ舻脑捚鋵嵾€是可以看一下。在這個表格中橫向的篩選元素很多，那么就通過滑動或者點擊來獲取更多標簽和表格內(nèi)容，另外標簽可以做排序但不能做展開篩選，類似的形式可以參考下汽車之家或者汽車配置界面。

 

 

案例3: 圖文列表優(yōu)化

這是一個比較典型的圖文布局案例，需要注意的是很多小的細節(jié)，整體來看頁面上半部分有效信息太少。什么是有效信息就和上文我們提到的4點是一樣的，如果你的界面只是為了展示好看的圖片和簡單的標題來排版，那么這個界面一定是無效的。如下：

 

 

然后底部的左文右圖區(qū)域的信息又比較密集，和上半部分形成了一個明顯的反差。另外加上一些小細節(jié)的處理不到位：卡片投影太短太深，圓角不夠統(tǒng)一，文字行間距不合理，功能位置擺放不合理，這樣整體就感覺到很多瑕疵。另外如果只是自己做練習(xí)那么圖片可以選擇的更美觀一些，而不需要收到產(chǎn)品業(yè)務(wù)的限制，那么我們花10分鐘來重新調(diào)整一下整體的布局和優(yōu)化一些細節(jié)。

 

 

在版式上最后做了兩個略有區(qū)別的版本，你們覺得哪個更好呢?