恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
如何让我们的设计变得更精致
0.0°
2019-01-18 原创文章 经验/观点 举报 12051 420 473 46

关于 UI 设计需要注意哪些细节的讨论,我们不一次把所有列举出来,而是先围绕一件事展开,那就是——“对比”。

抛开产品和交互上的问题,能让我们觉得精致好看的界面,都离不开 “对比” 的应用,这也是整个产品设计中最重要的视觉问题。而缺乏对比的设计,看起就会来乏善可陈,毫无吸引力,比如下图的案例:


Image title



想要做好界面中的对比,可以从下面几个方面入手:


  • 形式
  • 色彩
  • 文字
  • 层级


下面,我用一份课程中学生的作业作为讲解对象,来详细地阐述如何通过对比的方式来提升设计质感。


Image title



1. 形式对比


什么是形式呢,就是组件在相同的功能和元素下,排版、视觉的呈现方式。形式的对比,就是在一个页面中,不同组件的呈现方式上是否能形成差异化,让页面看起来更丰富多元。


分析上方的案例,组件之间并没有拉开差异性,尤其在详情页中,剧情简介和观众影评,影人和剧照,设计形式接近一致,这就是一个不好的开端。


再看看一些拥有相同问题的设计案例:


Image title

Image title

Image title


仔细点观察就会发现,作为飞机稿,不是图片、颜色用得花哨就够了的,组件缺少差异性,设计感就完全无法体现。如果还没法理解,就再看看下面几个案例,是不是就没有形式强行重复的尴尬,表现得更合理:


Image title

Image title

Image title


所以针对作业中的问题,我们在这个基础上进行完善,第一步要做的就是在形式上做出区分。所以我们可以通过以下几个思路来调整第一页:


  • 头部分页器和下方的上映/即将上映过于近似,控件形式上需要作出区分
  • 图片太多,模块左右边缘都是图片,导致看上去呆板,要减少图片出现的面积
  • 底部新闻部分不能继续使用大图模式要作出调整


Image title


第二页的调整上,主要在下半部分:


  • 演员和剧照应该有更加明显的差异
  • 评论和上方的简介这两个不同的组件,形式上却看起来完全一致


Image title


通过原型上的调整,就可以得到一个初步改版的样式,各个组件之间保证足够的差异化和识别性,可以观察看看是不是比原来的页面更合理了。



2. 色彩对比


色彩对比是很关键的对比,色彩决定作品给人的第一印象。那么如何为色彩做出对比呢?无非就是鲜艳对比浅色、暗色对比亮色、暖色对比冷色,不用特意套用配色的理论,用比较直观的感受判断就可以。


开始配色的过程中,我们首先需要确定主色和背景色,原图中的主色棕色和背景色白色,搭配起来的效果给我们的感受并不强烈,所以我对原色的棕色做一定范围的调整。


Image title


然后把主色添加到原型中,并为相关的一些元素添加合适的辅助色。先看第一页添加后的效果。


Image title


然后我们再为原型增加配图,这里要重点关注,以 “作品” 角度切入的话,配图也是整个界面元素的一部分,包括它使用的色彩。如果一个界面中出现了多处需要应用配图的地方的话,那么不同的模块所使用配图的风格和色彩,也应该有一定的对比,而不是一种风格撸到底的。比如还是之前的这个错误的案例:


Image title


所以根据这个原则,我们加入配图后再看看效果:


Image title


如果头部我们用了色彩主体比较强烈的配图,那么在下方就应该用比较平淡简约的,做出明确的对比。


在第二页中也应用一样的方法,那么思路如下:


  • 头部作为权重最高的组件颜色要更突出
  • 头部背景和封面的颜色应该具有更大的对比,并能让文字更容易识别
  • 头部、剧照图片较丰富,所以在影人和用户头像中应该使用更简单的配图


整体增加配图后的效果:


Image title


到这里已经有了大致的设计效果,已经可以明显感觉到比之前的设计有更好的提升,但是,对比不是到这里就结束了,我们接着往下做。



3. 文字对比


文字对比是最容易被忽视的细节,很多设计师都认为文字只要看得清就行,样式变化越少越好,这是非常错误的思路。


文字样式的多少主要取决于文字段的类型和需要重点体现的内容数量,而不是没有理由的精简到最少。例如看一篇排版成熟的期刊或是论文,其中标题、副标题、正文、引用、标注等作用不同的文字段,都会有不同的样式来帮助我们去区分,如果从头到尾出现的所有文字都应用一样的格式,那么就毫无可读性。


文字的对比,主要通过以下几个属性表现:


  • 字号
  • 字重
  • 色彩


即:越重要的文字字号越大、字重越高、色彩越深,权重越低的则反之。


回到我们的案例,在原型阶段,其实我已经对文字做出了简单的对比处理,下面我们要进一步细化这个步骤。


修改的分析大致如下:


  • 将分页器作为权重最高的文字段,所以模块标题不应该比它更显眼
  • 多段文本比标题类文字权重低一级,可以统一它们的样式并比标题稍弱
  • 注释类文字比多段文本再弱一级,用较低的灰度
  • 为评分、点赞数、展开等有“特殊性质”的文本增加色相


然后我们可以看看下面修改前后的对比:


Image title


Image title


通过正确细化文字的对比以后,就能真正让页面精致起来,具备丰富的细节。当然,对于文字权重的安排和思考会根据不同的思路和产品需求得到不同的样式结果,但绝对不能忽略这个过程。



4. 层级对比


最后一个,就是层级的对比。这么命名实际上比较拗口,它就是元素在 Z 轴上的高度,即元素的投影应用,比如谷歌官方的解释。


Image title

Image title


投影的使用既是视觉样式,也是一个用来制造景深的技巧。只要在一个扁平的界面中,为任何一个元素添加了投影,那么这个界面就存在了上下的空间关系,处于上方的元素就会得到凸显,例如苹果官方应用中的案例:


Image title


既然是空间关系,就要有前后的落差对比,我们要为最重要的元素增加投影,而不是把它当成设计风格进行统一的添加。所有元素都带上了投影,就没有了对比,可看性也会大打折扣。


Image title



所以,在这些页面中,需要突出的元素分析如下:


  • 首页头部广告图层级要高于下方其它元素,作为优先级最高吸引用户的入口
  • 详情页头部的电影海报要进行凸显,和背景拉开层次
  • 详情页底部评论对影片重要性较高,为社区原创内容,也需要突出


最后,我们就可以得到下方最终的效果:


Image title


关于投影的设置,可以参考我之前写的另一篇文章:

https://zhuanlan.zhihu.com/p/40293659


最后,我们再对比一遍修改以后的案例和之前的案例,看看更细致的增加了对比以后,有哪些提升:


Image title

Image title


诚然,这次的修改主要只针对在原作框架上的小范围调整,没有完全翻新,会受到很大的局限,但也足以让我们的设计变得更精致和具备可看性!


多做总结并进行对比的训练,就可以很快的帮助大家掌握上面所讲的几个知识点。本次讨论的内容就到这里,后面还会增加其它分析,谢谢观看。








更新:2019-01-18

收藏

420人已收藏

超人的电话亭

酸梅干超人的电话亭

  • 49

    作品

  • 1079

    粉丝

  • 0

    关注

  • B端设计师所需的页面基础框架学习
  • 深色模式设计思路分享
  • 专业B端设计师要懂的DesignToken概念解析
  • 运营设计应该怎么卷?
相关标签
设计经验分享ui

    猜你喜欢

      2019-01-18 原创文章 经验/观点 举报 12051 420 473 46

      如何让我们的设计变得更精致

      0.0°

      你确定要举报如何让我们的设计变得更精致

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年01月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      473
      420
      46

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

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

      登录

      手机号

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

      登录
      第三方账号登录