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

從提交的這張UI界面來分析，先看一下整體，我們利用模塊覆蓋法來将頁面的内容區分一下：

我們發現頂部的内容在整體視覺上比較擁擠，并且信息比較散，所以我們要對頂部這塊内容再拆分重組一下。這裡他将數字部分内容整合到了左側，但是這樣會讓左側内容過于擁擠，而且右側區域隻有一個圖标是達不到平衡的效果，雖然放了标簽，但是标簽和人的關聯性還是差了一些，所以标簽要麼跟頭像要麼跟名字，而不要躲在角落裡。

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

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

個人中心其實更多的是展示與我相關的信息和内容，目前大部分産品的設計風格也都是以簡潔為主，所以我們也盡可能的利用到這點。卡片插在中間是個不錯的想法，但是一般我們在做UI設計的時候層級做出3層及3層以内即可，不要出現第四層。

3層指的是：背景層、内容層、懸浮層/疊加層，如果一個界面中出現4層，會導緻界面的層級過多，信息就較為複雜，所以這個界面中，收藏夾一欄的卡片是不需要加投影的，隻需要圖标加文字的上下排列即可。

接下去，下方的功能列表在浏覽上效率過低，我們看到要浏覽完這列信息我們視線需要折行，并且這些功能是不需要都放在頁面下方去堆疊，其實頂部導航欄也是可以利用起來的，由于這是一款美食類的産品，用戶很多時候也會在個人中心去搜索我創建的食譜、作品等内容，所以像搜索和消息可以直接放在導航欄，而設置和關于這些較低頻的操作就可以合并起來，那麼原來6行列表就變為了4行，那這四行内容我們可以直接用橫向排列的形式去做了。

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

很多新人設計師在做UI界面的時候就會不知道應該放什麼信息上去。所以要明白的是這個信息能告訴用戶什麼，用戶能通過這個信息判斷什麼，用戶的浏覽順序和重點在哪裡？

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

1. 這個界面告訴用戶哪些信息
2. 用戶能否通過這些信息判斷自己是否要繼續任務流程
3. 界面的浏覽順序是怎樣的
4. 信息展示的重點和次要點是否展示合理

接下來講兩個案例：

第一次從pc端遷移過來的同學會有這幾個問題，同樣的界面信息和内容如果要完全保留的遷移到移動端應該怎麼設計，一個界面放不了那麼多内容。比如我們先來看這個這個卡片列表：

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

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

怎麼判斷重不重要呢？一個是用戶查看和操作的頻率，另外就是業務側的側重點。這邊為了隐藏一些敏感信息某些文案就處理了一下，大家可以看一下我們方案的前後對比。

這裡沒有删減任何信息，因為确實在業務方面需要某些信息，但是像“創建時間”“查看軌迹”“當前狀态”這些是沒有必要的文案就可以省略。而卡片的狀态一般在移動端上會放在右上角顯示，并且在移動端中不需要加圖标做修飾。

在原來的卡片中，如果我們要根據創建時間去找的話，因為工單、創建、狀态3行文字有點類似，所以會導緻尋找效率不高，那麼我們就講工單還有時間分開放置，在滾動浏覽的時候可以更好的尋找。

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

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

因為移動端的導航太有限了，像pc端左側和頂部的篩選控件可以放多層聯動，并且橫向可以展開更多的标簽，但是移動端橫線太受限了，大家可以看一下如果我們真的要整體遷移的話就會變成以下這樣的情況，但是移動端的核心的方便快捷，并不适合那麼複雜的内容在一個界面去進行交互流轉，所以左側縱向tab導航不會出現下拉展開的二級聯動。

所以大家幾乎沒有看到過最後那樣的終極形态，因為實在太複雜了，但是如果講左側的縱向導航去掉的話其實還是可以看一下。在這個表格中橫向的篩選元素很多，那麼就通過滑動或者點擊來獲取更多标簽和表格内容，另外标簽可以做排序但不能做展開篩選，類似的形式可以參考下汽車之家或者汽車配置界面。

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

然後底部的左文右圖區域的信息又比較密集，和上半部分形成了一個明顯的反差。另外加上一些小細節的處理不到位：卡片投影太短太深，圓角不夠統一，文字行間距不合理，功能位置擺放不合理，這樣整體就感覺到很多瑕疵。另外如果隻是自己做練習那麼圖片可以選擇的更美觀一些，而不需要收到産品業務的限制，那麼我們花10分鐘來重新調整一下整體的布局和優化一些細節。

在版式上最後做了兩個略有區别的版本，你們覺得哪個更好呢？

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!