5个改稿案例教你如何审视自己的UI界面设计

  • A+
所属分类:经验思维

本文来源: 酸梅干超人(公众号: 超人的电话亭), 共 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 可以被左右滚动,并且将活动公告和图标的位置对换。
  • 减少推荐歌单的数量,一页三个,可以使用滑动的方式来查看更多,并加入设计细节。
  • 右图会员卡片重新设计,并将下方三个重要模块使用渐变色来突出显示,其他内容一律使用列表展示。
  • 对 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: