超级大乐透杀蓝公式:5個改稿案例教你如何審視自己的UI界面設計

  • A+
所屬分類:經驗思維

排三复式投注计算公式 www.ygqvkm.com.cn 本文來源: 酸梅干超人(公眾號: 超人的電話亭), 共 1584 字

本文來自咸梅干超人干貨滿滿的對學生UI界面設計作業的優化解析,在看的同時也可以看看這些問題有沒有出現在自己的作品中,以及通過4個方面自查并進行修改。

案例1:

5個改稿案例教你如何審視自己的UI界面設計

問題分析:

排版:頂部撐滿Banner的做法使頁面割裂嚴重;左圖卡片內的字段親密性沒有很好表現,右圖列表太擁擠。

字體:字重、字色的對比不夠強烈,Banner 圖上的字對齊出現問題,且無法被看清。

色彩:沒有太多問題,主色使用太少,體現不夠明顯。

樣式:左圖卡片的投影太深;下方健康訂閱的組件樣式不應使用時間軸的樣式進行設計。

5個改稿案例教你如何審視自己的UI界面設計

改稿說明:

  • 將所有圖片進行替換,并加強不同文字之間的粗細和深淺對比。
  • 頂部右側加入搜索圖標,不會顯得太空;修改頂部 Banner 圖的樣式,Banner 圖的下方加入活動公告。
  • 在圖標、個人頁頂部的大片區域中增加藍色的使用,讓主色很好地體現出來。
  • 右側個人頁上半部分重新排版,中間 4 個圖標的視覺感加強,底部每個列表之間的間距加大。

 

案例2:

5個改稿案例教你如何審視自己的UI界面設計

問題分析:

排版:左圖上方的電影背景右側空出一大塊,很奇怪,右圖卡片上下留白也太多。

字體:字重、字色的對比不夠強烈,大段閱讀的文字太小,在手機上無法被看清。

色彩:使用了 3 種色彩,并且比例也大致相同,無法明確主色是哪一個。

樣式:兩個頁面分割和投影的使用都太深,所有圖片也沒有替換。

5個改稿案例教你如何審視自己的UI界面設計

改稿說明:

  • 大段閱讀的文字加入行高,使用深灰色,并加大字號。
  • 左圖上方加入電影封面圖,右側放置電影信息,后面使用深色背景模糊的方式來體現文字,平衡畫面視覺感。
  • 修改主色使用的比例,把主色用在頁面最重要的元素上面,輔助色用來點綴其他次要元素。
  • 右圖將卡片內部的字段進行重構,把用戶最關心的信息體現出來,而不是電影介紹。

 

案例3:

5個改稿案例教你如何審視自己的UI界面設計

問題分析:

排版:左圖頁面割裂感嚴重,不同??櫓淶募渚嘁裁揮瀉芎玫目刂?。

字體:字體對比不夠明顯,左圖電影標題文字使用太小、太細;右圖閱讀文字太大,且沒有加入行高。

色彩:左圖沒有出現輔助色,右圖也沒有出現主色,顏色的使用比例不均勻。

樣式:圖片使用過多,且分頁器的做法錯誤;底部 Tab Bar 的設計太過粗糙;右圖沒有很好地體現出該頁面所要表達的目的。

5個改稿案例教你如何審視自己的UI界面設計

改稿說明:

  • 左圖使用電影圖撐滿頂部的做法進行設計,最新電影一目了然。
  • 調整分頁器的做法,并將圖片減少到三張,加入電影評分,整個??櫓糜誶成ㄆ?。
  • 使用卡片式設計將右圖的電影信息進行整合,將下放懸浮的按鈕體現得更明顯。
  • 明確右圖頁面最重要的目的是讓用戶播放該影片,所以將播放按鈕使用主色來設計。

 

案例4:

5個改稿案例教你如何審視自己的UI界面設計

問題分析:

排版:左圖下方的白色背景使對齊出現問題,右圖兩邊的間距和左圖也不一樣,并且列表太擁擠。

字體:沒有太大問題,快速入口下方的文字可以適當縮小。

色彩:主色使用過多,應適當加入輔助色。

樣式:左側頁面圖片過多;右側頁面排版可以優化。

5個改稿案例教你如何審視自己的UI界面設計

改稿說明:

  • 頂部加入產品 Logo,輸入框放在 Logo 的右側。
  • 使 Banner 可以被左右滾動,并且將活動公告和圖標的位置對換。
  • 減少推薦歌單的數量,一頁三個,可以使用滑動的方式來查看更多,并加入設計細節。
  • 右圖會員卡片重新設計,并將下方三個重要??槭褂?a href="//www.ygqvkm.com.cn/sheji/jian-bian-se/" title="漸變色" target="_blank">漸變色來突出顯示,其他內容一律使用列表展示。
  • 對 Tab Bar 進行調整,新增圖標的設計,當前播放的歌曲在最右側使用歌曲封面更直觀地展現。

 

案例5:

5個改稿案例教你如何審視自己的UI界面設計

問題分析:

排版:沒有太大問題,右圖頂部的促銷信息沒有和下方對齊。

字體:部分文字太小,無法被看清,右圖文字的顏色沒有對比。

色彩:當前頁面沒有太大問題。

樣式:商品規格選擇應直接出現在頁面中,配送方式應出現在付款頁中;右圖展示了太多不重要的信息。

5個改稿案例教你如何審視自己的UI界面設計

改稿說明:

  • 對所有圖片進行了替換,頂部商品圖下方的輪播圖修改成正方形來展示。
  • 對信息內容進行重新排版,并將規格選擇直接展示在頁面中,使用分頁器來切換。
  • 右圖減少購物車卡片的字段,只將最重要的信息展示出來;底部合計金額進行視覺優化。
  • 調整底部 Tab Bar 的圖標,選中狀態使用深黑色來表現。
?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: