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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
给UI版式设计的4条小贴士
0.0°
2016-04-03 自译外文 经验/观点 原作者: Chris Bowler 举报 1556 11 5 0

    (附件为原文,作者水平有限,翻译有错误指出还望各位指正)

    设计中“表达”必不可少。无论你是设计网页、app还是穿戴设备的用户界面,都应该清楚地表达其意图和目标。由于文字在表达方面是主力军,所以你应该对版式设计有一个全面的了解。

    当然了,设计用户界面和设计电子书或博客的主题界面是不一样的,但是它们的中心原则是相通的。毕竟屏幕上的表达主要依靠文字,而样式则是文字的展现形式。

    正如Oliver Reichenstein在他的文章中开创性地说:“95%的网页设计是版式设计。”

    改进版式设计提高可读性、理解性、利用率,保持图文平衡。也就是说,改进版式也可以优化界面。

    这里有4个方法以及3个优雅的实例以供参考。


    四条版式设计小贴士

    版式设计硕士Robert Bringhurst在他的杰作《版式设计基本原理》中说:“版式设计是为了凸显内容。”

    界面中有用户可能做的一系列选择,你的设计应该为用户提供决策过程,并且用不增加认知负荷的方式凸显内容。


    1.选择一种在大多数字号下都能表现得很好的字体

    许多用户界面中的控件都需要不同字号的文字,比如按钮、字段标签、段标题等等。所以去选择一种在大多数字号和粗细下都能保持可读性和可用性的字体吧,比如Avenir,Univers和Lato。

Image title


    2.选择一种能轻易识别字母的字体

    现有的许多字体下的某些字母非常相似,比如I的大写(I)和L的小写(l)看起来几乎没什么区别。R和N的小写连在一起时(rn)可能会被误认为是M的小写(m)。所以为你的用户挑选一种可以清晰分辨所有字母的字体吧。比如Clear Sans和Lato,看看它们的大写的I和小写的L吧。

Image title


    3.用设计用户界面的方法来设计文本段落

    Cameron Moll已经坚持这个理念十年了,他认为普通的设计师只把文本当作内容,而优秀的设计师把文本当作用户界面来设计。

    设计界面时,秉持这种理念可以很好的避免界面冗杂。当你的文本作为一个功能性的元素出现时,它就是用户界面的一部分,这点在常规的界面中都适用。如果你不相信,只要回忆一下当你碰到一个明明是的拉的门却写着推的情况。


    4.考虑设计的方方面面

    如果你不熟悉JTBD(一种专注于用户需求的设计体系),你就问问你自己你想帮助用户解决什么问题,这个问题的答案可以帮助你设计用户界面包括文字版式。

    Tim Brown认为:不同的字体有不同的用处。

    设计师在离线阅读时的字体匹配上已经做的很好了。

    网站和手机应用的离线阅读有两个目的:

        1.让人们提前储存内容以备后用。

        2.给人们一个地方去阅读它们。

    因为在用户界面中是最多的是文字,做得最多的是阅读,所以设计师们用了两种不同的字体分别来设计离线阅读页。一种是衬线字体Lyon,另一种是无衬线字体JAF Bernino Sans。这两页在用户打算阅读或者打算完成某项任务时有非常明显的不同。

    使用好的字体可以给用户带来好的用户体验。在成千上万本书、杂志和报纸中,衬线字体更为普遍地应用于长文本。但是在网页中无衬线字体则作为一种界面元素更常出现。

Image title


    向专家学习

    值得庆幸的是,现在有很多可以给予我们灵感,指导我们排版一个美丽且有效的用户界面的网站。这里有三个我最喜欢的。


    Medium

    Medium出色地阐述了“用设计用户界面的方法来设计文本段落”。作为一个阅读和写作的平台,Medium致力将文本设计做到最好。其他写作平台和内容管理系统为了能有好的效果也都在模仿Medium。

Image title

    已发布的文章目录排版优美,便于阅读,是充满了缜密思考的通用型设计。更棒的是在Medium写作不用去预览文章的发布效果,因为你的所见即所得。

那主要的阅读部分呢?它们使用和标题相同的Bernino字体,不过也很容易区分两者,因为标题字号更大。


    Slack

    在这个例子中,文本仍然是最主要的。作为一个团队交流平台,Slack在文本上着重于交互和表达。就像Buffer,它坚持使用单一字体Lato,并做到了极致。

Image title

    通过缜密思考思考应用实例,比较其中字重和颜色以及留白多少,Slack的设计师最终建立了这样一个层级分明而且容易阅读的平台。


    Rdio

    作为一个音乐应用,文本对Rdio来说不是主题。但是在这里我们依然能看到它精心设计的文本段落,以及对各种字号的Whitney字体完美使用。

Image title


    建立你的UI版式

    无论项目目标是什么,版式在界面中都是必不可少的。版式设计的好,可以为你在用户的印象中加分,设计的不好则会阻塞你和用户的交流。这些指导条例和实例可以帮助你更好的设计版式,沟通用户。

更新:2016-04-03

下载
收藏

11人已收藏

Cyy_Emma

接设计私活,q交流群:145065052

  • 35

    作品

  • 425

    粉丝

  • 21

    关注

  • 利用Tableau开发通用性Dashboard指南
  • 优雅Dashboard,附送Sketch源文件~
  • 第二阶段C4D练习
  • 2016年11月移动端交互设计Top 5

    猜你喜欢

      2016-04-03 自译外文 经验/观点 原作者: Chris Bowler 举报 1556 11 5 0

      给UI版式设计的4条小贴士

      0.0°

      你确定要举报给UI版式设计的4条小贴士

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年01月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      11
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录