那麼收到小夥伴們的作業，我們一起來看看有沒有什麼問題，希望可以幫助大家解決一些問題。
案例1: 個人中心
從提交的這張UI界面來分析，先看一下整體，我們利用模塊覆蓋法來將頁面的內容區分一下：
我們發現頂部的內容在整體視覺上比較擁擠，並且信息比較散，所以我們要對頂部這塊內容再拆分重組一下。這裡他將數字部分內容整合到了左側，但是這樣會讓左側內容過於擁擠，而且右側區域只有一個圖標是達不到平衡的效果，雖然放了標籤，但是標籤和人的關聯性還是差了一些，所以標籤要麼跟頭像要麼跟名字，而不要躲在角落裡。
另外數字的字體使用也會有一種被擠扁的感受，這裡不建議用這樣很瘦的字體。並且這裡其實他將點讚和收藏一起收了起來可能是因為左側放不下了，那麼我們直接就另一起一行放數字新信息即可。這樣名字與頭像和平衡對稱，數字又可以水平平均鋪開，這是一種常規的處理方法。
其次，整個版面白色區域較多，那麼中間的開通會員卡片的色彩就過於重了，雖然我們需要引導用戶去開通，但是視覺上給人感知太強烈，就感覺有點突兀。
個人中心其實更多的是展示與我相關的信息和內容，目前大部分產品的設計風格也都是以簡潔為主，所以我們也儘可能的利用到這點。卡片插在中間是個不錯的想法，但是一般我們在做UI設計的時候層級做出3層及3層以內即可，不要出現第四層。
3層指的是：背景層、內容層、懸浮層/疊加層，如果一個界面中出現4層，會導致界面的層級過多，信息就較為複雜，所以這個界面中，收藏夾一欄的卡片是不需要加投影的，只需要圖標加文字的上下排列即可。
接下去，下方的功能列表在瀏覽上效率過低，我們看到要瀏覽完這列信息我們視線需要折行，並且這些功能是不需要都放在頁面下方去堆疊，其實頂部導航欄也是可以利用起來的，由於這是一款美食類的產品，用戶很多時候也會在個人中心去搜索我創建的食譜、作品等內容，所以像搜索和消息可以直接放在導航欄，而設置和關於這些較低頻的操作就可以合併起來，那麼原來6行列表就變為了4行，那這四行內容我們可以直接用橫向排列的形式去做了。
那麼最後，如果要對界面做視覺上的優化，我們要對信息重新排版、圖標進行重新設計，在原圖中我覺得底部中間的圖標還是具有品牌特徵的，那麼我們就把這個品牌特徵拿過來，作為一個輔助圖形，這個輔助圖形就可以用在小標籤和卡片背景的修飾中。
很多新人設計師在做UI界面的時候就會不知道應該放什麼信息上去。所以要明白的是這個信息能告訴用戶什麼，用戶能通過這個信息判斷什麼，用戶的瀏覽順序和重點在哪裡？
好了，再強調一遍，當你設計完一個UI界面的時候，先問一下自己這4個問題：
- 這個界面告訴用戶哪些信息
- 用戶能否通過這些信息判斷自己是否要繼續任務流程
- 界面的瀏覽順序是怎樣的
- 信息展示的重點和次要點是否展示合理
接下來講兩個案例：
案例2: pc端遷移移動端案例
第一次從pc端遷移過來的同學會有這幾個問題，同樣的界面信息和內容如果要完全保留的遷移到移動端應該怎麼設計，一個界面放不了那麼多內容。比如我們先來看這個這個卡片列表：
這個列表的信息很有pc端的特點，這位同學其實是有意識的將重要信息強化了，但是pc端到移動端我們是可以簡化很多信息和細節的，另外在用戶瀏覽的路徑上也會有不同。
那我們看到這個卡片中的信息，從上往下依次瀏覽好像並沒有問題，但就是因為沒有問題，這才是問題。類似這樣的信息卡片，其實如果按照這樣排，那麼用戶就會瀏覽完所有信息再做決策，而我們知道的是並不是所有信息都需要讓用戶去關注到，例如最終要的是標題、狀態和查看軌跡，而不重要的是工單和創建時間。
怎麼判斷重不重要呢？一個是用戶查看和操作的頻率，另外就是業務側的側重點。這邊為了隱藏一些敏感信息某些文案就處理了一下，大家可以看一下我們方案的前後對比。
這裡沒有刪減任何信息，因為確實在業務方面需要某些信息，但是像「創建時間」「查看軌跡」「當前狀態」這些是沒有必要的文案就可以省略。而卡片的狀態一般在移動端上會放在右上角顯示，並且在移動端中不需要加圖標做修飾。
在原來的卡片中，如果我們要根據創建時間去找的話，因為工單、創建、狀態3行文字有點類似，所以會導致尋找效率不高，那麼我們就講工單還有時間分開放置，在滾動瀏覽的時候可以更好的尋找。
而查看軌跡按鈕我還是去掉了，考慮到的既然這裡是軌跡軌跡訂單列表那麼用戶就知道進來是要查看軌跡的，所以不需要全部在卡片中給按鈕，這個也是web和移動端的區別，移動端的卡片是可以整體點擊的，就和電商的訂單列表、提現記錄等卡片列表一樣的都可以點進詳情，而web中的卡片則不行，所以用戶在這裡反正需要點擊一次，那麼這裡就不需要給一個軌跡按鈕，還顯得更複雜。
再來講個案例，相信很多同學在pc端的b端設計中遇到過這樣的問題，就是很多表格類的信息在web端可以一屏放下，到移動端就放不下了，那該怎麼去做。其實如果你們可以去參考阿里雲的app，類似於這樣pc端b端的移植到移動端來說，也只能部分移植。
因為移動端的導航太有限了，像pc端左側和頂部的篩選控制項可以放多層聯動，並且橫向可以展開更多的標籤，但是移動端橫線太受限了，大家可以看一下如果我們真的要整體遷移的話就會變成以下這樣的情況，但是移動端的核心的方便快捷，並不適合那麼複雜的內容在一個界面去進行交互流轉，所以左側縱向tab導航不會出現下拉展開的二級聯動。
所以大家幾乎沒有看到過最後那樣的終極形態，因為實在太複雜了，但是如果講左側的縱嚮導航去掉的話其實還是可以看一下。在這個表格中橫向的篩選元素很多，那麼就通過滑動或者點擊來獲取更多標籤和表格內容，另外標籤可以做排序但不能做展開篩選，類似的形式可以參考下汽車之家或者汽車配置界面。
案例3: 圖文列表優化
這是一個比較典型的圖文布局案例，需要注意的是很多小的細節，整體來看頁面上半部分有效信息太少。什麼是有效信息就和上文我們提到的4點是一樣的，如果你的界面只是為了展示好看的圖片和簡單的標題來排版，那麼這個界面一定是無效的。如下：
然後底部的左文右圖區域的信息又比較密集，和上半部分形成了一個明顯的反差。另外加上一些小細節的處理不到位：卡片投影太短太深，圓角不夠統一，文字行間距不合理，功能位置擺放不合理，這樣整體就感覺到很多瑕疵。另外如果只是自己做練習那麼圖片可以選擇的更美觀一些，而不需要收到產品業務的限制，那麼我們花10分鐘來重新調整一下整體的布局和優化一些細節。
在版式上最後做了兩個略有區別的版本，你們覺得哪個更好呢？