恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
这个简单的界面我是这样进行修改的
20.7°
原创文章 / 教程 / / 举报
1723 39 51 8

2021-11-25

光阴似箭,一晃 2021 年就还剩余最后一个多月的时间啦!年初定的目标是否已经完成,是时候开始验收啦!设计能力的提升只需要多一点行动,多一分设想,简单的事情重复做,重复的事情做到极致,专业能力自然不会太差。


想要做得比别人好,就要在细微之处多用心,往往被忽略的都是精细化的部分。为了提高大家对于设计的细节处理,黑马哥在之前也分享了一次案例修改思路,也获得了很多设计小伙伴的认可。本期将会继续给大家分享,面对这个非常简单的需求,我是如何进行设计细节处理的,希望可以带给你更多思路。



先看一下这个界面修改前后的对比,是一个相对简单的界面,无论是功能还是文案内容都不复杂。



下面通过发现问题和案例修改来进行分析(案例来源于黑马家族内部学员的初次作业)。




发现问题


好了,看完修改前后的对比之后,我们开始进一步分析,从上到下一起来看一下吧!



头部导航栏区域

功能层面来说,发布既然运用高亮的处理,证明该功能是相对比较重要的,放在手势盲区操作体验不是很友好。



右侧的两个功能图标距离太近,点击过程中容易造成误操作,两个图标的视觉不平衡,不能以高度来定标准,要看整体的面积占比。



最后,发布、搜索、功能图标之间的间距没有做规范设计,导致设计不够严谨,视觉协调度和节奏感没有呈现出来。




顶部分类导航区域

这个部分问题不是很大,类别之间的间距可以适当增加,如果是可以左右滑动的,末尾最好再新增一个,把可滑动的样式体现出来。




Banner 图区域

轮播 Banner 图采用通栏的处理,会将整个界面一分为三(头部区域、Banner 区域、作品区域),如果界面边距较大的时候,这样处理不是很理想,会使得整个界面不够连贯。



轮播点的处理不建议使用灰色来表现,不仅区分不明显,配色上面也显得不够干净整洁。



Banner 图本身的质量也是需要注意的,站在输出作品的角度来说,图片的质量会影响整个作品的气质。而且这个图没有任何主题,设计的真实感无法得到体现。




作品(菜谱)区域

整个界面篇幅较大的区域就是推荐的各类菜谱,第一眼看过去,是不是图片显得没有食欲啦!针对美食类作品,只有食物本身的食欲感才能吸引用户去点击学习。



菜谱名称、作者信息、收藏与收藏数的显示亲密关系处理不合适,关联性被分断了。



间距留白没有掌握好数字关系,显得比较拥挤。直角的封面图显得有些生硬,亲和力不是很强。




底部标签栏

底部标签栏最主要的就是图标设计,图标设计的规范性需要注重一下。比如针对线性图标来说,描边粗细的统一、圆角值的统一和风格的统一等需要重点对待。



其次就是点击状态和默认状态的区分,图标利用颜色深浅进行区分也是可以的,文字区域的区分也需要进行深浅的对比。



以上便是针对这个界面发现的一些在 UI 层面的问题,接下来我们一起针对这些问题进行修改。




案例修改


针对罗列出来的问题,下面进行一些修改,设计属于主观表达,仅代表黑马哥自己的想法。不足的地方欢迎大家留言指正,互相进步。



头部导航栏区域

为了方便用户发布内容,我将发布按钮移出导航栏,放置在底部标签栏。将右侧的两个功能图标拆分为左右两侧布局,优化了间距和布局细节。



功能图标绘制上面三条横线做了长短变化,显得更灵动。整体图标的高度要比通知图标的小一点,以此来平衡它们之间的面积差异。




顶部分类导航区域

这个部分优化了文字之间的间距,然后通过字体大小和颜色深浅来区分点击和默认状态的差别,将短线装饰改为弧线,弧线作为符号基因运用到底部标签栏的图标设计中,这里是作为视觉符号的延续。




Banner 图区域

轮播 Banner 图本身没有做,本期案例只是 UI 层面的修改。优化了 Banner 图的比例,采用 8:3 的比例进行计算,取 4 整除的高度数值。轮播点的设计通常有数字、小圆点、小短线、进度形式等,这里采用进度形式来表达。




作品(菜谱)区域

这个部分调整比较大,从内容到布局结构都做了调整。首先将固定尺寸的封面图改为宽度固定高度自定义的瀑布流设计,满足用户的不同拍摄需求,对图片设置了圆角处理,增强亲和力。



将标题、作者信息、收藏数据统计等信息进行整合,集中布局展示,增加内容之间的亲密关系。新增了标签,由于菜谱种类较多,通过标签更容易搜索到同类菜谱。



收藏图标加数字来体现之前的文字表达形式,用户更容易理解,采用爱心图标既能表示喜欢也能带有收藏的作用,点击欲更强。



单行标题适配为最多两行显示,方便用户为自己的菜谱名称增加修饰词。这里需要考虑最大值的情况,设计的时候需要体现出超出最大值的设计样式。



最后就是选择了拍摄质量更好的图片来填充,作为作品输出来说,配图的质量还是至关重要的。来看一下这个部分的最终效果,对比一下就可以感受出前后视觉感的差异。




底部标签栏

将发布按钮布局在中间位置,做突出形式,吸引用户发布内容,丰富平台的作品量和提高用户参与度。可以布局在标准的底部标签栏内部,也可以做凸出显示,这里尝试了两个版本。



优化了图标设计,统一了描边值和圆角值,用小弧线作为视觉符号进行点缀。点击状态换成面性图标,区分更加明显,显得也更为成熟稳重。文字需要体现当前状态和默认状态的差异,这里使用品牌色来区分,也可以使用深浅不同的灰色来体现。





完成


通过对发现的问题进行调整之后,完成了最终的设计案例优化。这个案例比较简单,通过案例想要说明的点是:无论简单还是复杂,都要考虑好每一个细节的深入,也要对每一个元素的设计有自己的设计想法。每一个界面都要体现出设计规范、设计质量和自己的设计态度,只有作品成熟才能说服别人,获得认可。



本次案例修改的大体流程是:分析问题所在、组织优化思路、调整内容结构、设计高保真原型、填充内容完成最终 UI 稿。



最后,感谢大家的阅读学习,希望对大家能有一定的帮助,后续将会继续带来更多案例的修改分析,我们互相进步。



作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。

Powered by Froala Editor

微信公众号:黑马家族

收藏

39人已收藏

黑马青年

设计交流微信:heimaux

  • 78

    作品

  • 2.2w

    粉丝

  • 134

    关注

  • 探索APP设计的手势交互(上)
  • 10 个底部标签栏设计技巧
  • 感官体验日记之手势交互-第3期
  • UIUE设计作品精选 | 黑马家族 ④

猜你喜欢

    黑马青年

    黑马青年

    设计交流微信:heimaux

    2016年度最佳作品集TOP10得主2017年度最佳作品集TOP10得主国民爱豆首页霸主2016年度最佳作品集TOP50得主
    • 2.2w

      粉丝

    • 2362.9

      人气

    • 7.2w

      颜值

    作品

      黑马青年

      点赞:51

      收藏:39

      评论:8

      这个简单的界面我是这样进行修改的

      你确定要举报这个简单的界面我是这样进行修改的

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年11月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验