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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
经验 | 后台设计中字体对细节的影响
0.0°
2018-01-04 原创文章 经验/观点 举报 4194 16 15 2

    写在前面:  在海康工作也有一年多了,在接触到大量的后台界面的设计后,其中经历了很多思考和磨练。也沉淀了许多东西,但总是想把这些宝贵的东西能找一个地方搜集起来。于是我开始写自己的设计日记,当然知识的分享也只是顺便,尽量半月更,爱看不看。(说笑)

    无论在平面还是在界面设计中,字体对整体给人的使用感受起着至关重要的作用。就像汽车的引擎,它可以造就一段历史,为设计提供源源不断的驱动力,也可能毁了一部好车,使之令人诟病。字体是设计的基础,尤其在以使用为主导的后台设计,更是起到了至关重要的底部。它关系到用户接收产品发出的信息过程中是否顺畅。比如,后台界面中经常会出现提示、报警 等状态类信息,那么用户的大脑在接受这些紧急的信息时,是否可以马上做出反应。


        做后台设计,其实就是在做信息层级的引导,为用户短时间内获取最多的信息量。在这里,我们不讨论字体设计的细节,而是从体验的角度入手,分析在后台软件的中不同字体样式对体验的影响。

以下图例,来自个人作品,点击图片名称进入原地址:

Image title

 图1

在“教学终端”的登录界面中,用左右布局将内容和操作区域分成两块。通过不同字体的大小区分不同的优先级。菲兹定律中有一条:被观察的物体越大越容易被察觉到,听上去好像是一句废话。但是这考验设计人员对产品的业务的熟悉程度:我是希望以右侧推送的内容为主以达到一定的推广作用还是希望用户能够第一时间找到登陆入口,迅速的进入到工作中。这非常重要,在日常的设计中,过多的关注设计的技巧而往往忽视产品最基本的需求,是很多像我们这种新人设计师的通病。


    Image title

图2


    在任务管理面板中(图2),字体除了有大小区分以外,也被赋予了不同的颜色。字体颜色的选用一定要遵循信息设计的几个基本的逻辑:1.关联性  2.可传达性 3.易复用性。(这里没有用产品设计,是因为后台的设计更像是信息或者数据的设计)

不同的颜色使得信息的层级更加突出,但是过多并且无逻辑的色彩会导致界面花俏,无重点。

1.因此强调有色字体对界面的关联性尤为重要,它使整个信息趋于整体而不是一盘散沙。

2.传达性则强调了通过颜色的区分是否增加了用户读取信息的效率,比如红色代表警告绿色代表良好等,通过颜色可以快速的进行区分。

3.可复用性则使用户形成固有的习惯,在其他页面中如果出现此类色彩能够从已习得的经验中对此类信息进行判断。比如18号白色字体,就是作为标题存在,14号红色字体是提示信息等。

Image title

图3(链接中提供了中英文双版本)



    比如在图3中,不同文字的尺寸和深浅构成了一个舒适的视觉环境。左侧为展示区域,右侧为控制区域,区分明显。通过字体的间距,营造出舒适的使用氛围,字体大小的巨大差异用以引导用户观察信息的顺序。对信息的合理安排,就像是一架飞机从起飞到进入平流层最后再降落到过程,有主有次,将信息分成多个优先级以引导用户对信息进行梳理。

    除了以上提到的比较重要的三点以外,其实还有很多需要注意的,这里就不一一阐述。字体的大小,颜色,中英文之间的样式差异,看上去无关技法,也的确无需高深的设计技巧,以上看上去也的确似懂非懂,难以像某AE C4d教程那样获取实实在在的实用技巧。但是这更像是某种观念或者意识上的训练。它考验的是设计师对信息(数据)设计的把控,就好像一个大厨,想要给你先做前菜还是直接上佳肴。这是一个需要根据用户实际需求进行考虑的东西。当然用户是不会直接说出自己真实的需求的,而如何将数据能够以一种更加高效的方式传达给用户,是我们身为后台设计人员始终以此为基础需要考虑的事情。


最后,还有两枚邀请码,有兴趣的同学请直接戳图片转到作品中查看说明吧。

Image title


    



我是一鸣

一个辛勤更新的博主 Dribbble

一个无聊玩玩吉他的设计狗 Bilibili

欢迎来踩(*@ο@*) 


更新:2018-01-04

收藏

16人已收藏

零源的设计日记

追波:nicoooer

  • 17

    作品

  • 307

    粉丝

  • 20

    关注

  • 高低模型烘焙笔记
  • Black gold -见远行更远
  • 技术实现丨如何增强UI页面的科技感
  • 效果实现丨科技元素获取途径指导手册

    猜你喜欢

      2018-01-04 原创文章 经验/观点 举报 4194 16 15 2

      经验 | 后台设计中字体对细节的影响

      0.0°

      你确定要举报经验 | 后台设计中字体对细节的影响

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年12月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      16
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录