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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
那些页面排版需要瞭解的事情
0.0°
2014-07-18 原创文章 经验/观点 原作者: 原作者 举报 41601 336 102 9

    排版是什么?

    排版是将文字、图片等元素在版面调整,使版面布局条理化的过程。一般来说,透过来版,让人们更容易的去阅读、接受这些提供给他们的资讯。

    为什么要提供良好的排版?

    一个良好的资讯传递需要几个要素来达成,分别是对的内容与对的方式以及对的人,唯有这三个要素都成立的时候,资讯就能够有效率的被使用者给接受。排版扮演着内容与使用者之间沟通的桥梁,良好的版面设计让使用者不需要特别的努力、训练就可以瞭解提供的内容;相反,糟糕的排版可能会让使用者拒绝接受这些内容。

    排版最重要的四个要点

    排版设计中有非常多需要注意的细节,各种细节也会因为不同的情境、需求而不同,底下列出了四项排版最重要的要点,如下:

    1. 对齐(Alignment)

    任何东西都不能随意摆放,每一个元素之间都有某种视觉关系。利用对齐建立一个清楚整齐的外观。

    2. 亲密(Proximity)

    彼此相关的内容应靠在一起,反之不相关的内容保持距离。利用亲密性,强调画面的组织与架构

    3. 重复(Repetition)

    重复视觉要素的颜色、字体、大小、空间等,增强条理性,也增强了整体一致性。

    4. 对比(Contrast)

    避免页面上元素太过相似,如果它们不同,哪就让他们截然不同。让重要的内容引人注目,让使用者间看到它们。

    参考资料:写给大家看的设计书、完形心理学

    文字排版要点

    文字是内容的本质,人们透过文字、句子来阐述知识,让我们透过瞭解文字排版,让文字更容易被阅读、被接受:

    1. 使用适合阅读的字体

    字体大小与使用者萤幕大小、使用距离有关,清楚瞭解使用者使用的环境与习惯后,选择一个适当的大小。

    2. 选用适当的字体

    有些中文字体的英文版本其实是不合适的,挑选与中文字体相对应的英文字体作为搭配的字体。

    3. 设定恰当的行高

    也就是“文字密度”,太挤的文字在换行时,眼睛不容易找到下一行的起点,较不容易阅读。

    4. 设定恰当的段距

    清楚的段落区分,让读者可以清楚地瞭解现在正在阅读的段落。

    5. 注意段落的宽度

    注意文字最后显示的设备大小,太宽或太窄的段落宽度都会造成阅读上的困难,一行文字以45字元~75字元是比较恰当的。

    6. 清楚的区分标题与内文

    使用对比的方式(例如颜色、大小、位置)将内文与标题清楚的区分开来。

    从认知心理学看排版

    • 人们会将邻近的事物视为一体
    • 红色跟蓝色放在一起容易疲劳
    • 大写文字难以阅读
    • 阅读与理解是截然不同的两件事
    • 如果人们感觉这个字体不易阅读,他们会把这种困难的感觉转化至文意本身,并因此觉得文章所谈到的内容难以执行或难以理解。
    • 较长的栏宽能提高阅读效率,但人们偏好较短的栏宽。
    • 适时的应用进阶展开,减少一次显示的资讯数量
    • 分类资讯
    • 提供明显的线索

      参考资料:瞭解人,你才知道怎么设计

    从设计法则学习排版

    • 80/20法则
      不要对设计中所有的元素一视同仁。应该利用80/20法则来评估各元素的价值、锁定重新设计与最佳化。
    • 希克定律(Hick's law)
      当选项增加了,下决定的时间也增加。
    • 倒金字塔法则
      以重要性递减的顺序呈现资讯。先呈现最重要的资讯,之后才是附加的详细资料。当呈现资料的效率很重要时,就使用倒金字塔法则。
    • 提高信噪比
      同一显示中,相关资讯与不相关资讯的比例,在不影响功能的原则下,必要元素应该尽量减到最少。
    • 使用基本元素,让使用者安心
      人们在数为世界的心智模型,常常是建立在对这些基本元素的瞭解,不管是网页或者是App,画面中的某些常见元素早已变成基本构成要素,使用者渴望或者预期他们能够在网页上看到些元素,已完成特定的任务,有安心的感受。
    • 易视性
      只使用者于使用产品的过程中,能够顺利达成特定目标的容易程度,让使用者可以看清楚产品的状态,并且轻松推荐可以采取的动作。易视性决定了app该呈现的关键内容是什么。
    • 进阶展开(Progressive Disclosure)
      进阶展开主要强调提供给使用者当下所需要的内容,其他没有助益的内容、控制项暂时不提供,直到使用者在各类别做选择后,才展开更多的相关细节。
      利用进阶展开的方式,可以减少使用者的认知负担。
      把资讯内容归纳于少数几个选项,在分阶段渐渐释出细节,简要呈现当下所需的资讯,不只能降低使用者认知负担,更可以避免丰富的选择堵塞使用者的思绪。
    • 分组(Grouping)
      完形心理学
      分组是一种组织资讯的技巧,将众多的资讯依照特定方式分类为几组,在同一组的内容相关性较高,不同组内容差异性大,面对庞大资讯时,可以利用这个方式减少压迫感。

      参考资料:设计法则

    从遥控器上学习排版

    DVD 遥控器是一个极度复杂的工具,上头除了电源、播放、暂停等基本功能外,还会参杂着其他各式各样的功能,零零种种加起来大约有40多个按钮,每个按钮对应各种功能...
    我们可以从以下几种方式,来简化复杂的遥控器:
    - 删除 - 去掉不必要的按钮
    - 组织 - 按照有意义的方式分组
    - 隐藏 - 隐藏不必要的按钮
    - 转移 - 转移不必要的功能到其他地方

    其他要点

    • 尽量使用单列版型而不是多列版型
    • 使用良好的预设值而不是给使用者选择
    • 使用良好的预设值减少使用者的操作
    • 界面要有鲜明的对比让使用者容易区分
    • 精简表单的内容
    • 不要在页面上放太多的连结,这样会分散使用者的注意力
    • 提供直觉的操作
    • 不要过度使用边框,这样会让界面四分五裂
    • 使用基本元件而不是重新设计
    • 将有关联的事物进行分组
    • 让点击区域大一点
    • 如果提供太多的选择,使用者反而一个都不会选
    • 使用社群验证的方式,让
    • 易读的标题
    • 易于阅览的文本
    • 善用留白,营造清爽干净的感觉
    • 界面风格一致性很重要
    • 注意文字的密度
    • 突出画面上重要元素
    • 一图胜千言
    • 把文字看作是使用者界面(UI)的一部份
    • 尽量不需要scroll就能看到主要的内容
    • 蓝色往往是最适合连结的颜色
    • 搜寻框尽可能为27个字元的宽度
    • 留白让内容更容易被理解
    • 大多数的人视广告为无物
    • 少即是多
    • 限制页面内容的长度.
    • 参考设计规范
    • 观察界面的视觉动线
    • 导航列要放在清楚的位置,如果导航列的项目是网站的核心,请勿必让导航列出现在每一个画面上
    • 使用响应式设计
    • 把重要的资讯放在列表的最上方
    • 在输入栏位旁提供提示、范例
    • 在送出表单前进行栏位错误的检查
    • 让使用者清楚知道点击哪里进行下一步
    • 在所有的页面上显示你的服务名称、Logo
    • 避免使用全大写的英文,除非是特别用来强调的标题内容
    • 为各种设备调整适当的字体大小
    • 你要考虑不同设备的阅读距离的不同
    • 把你的Logo放在固定的位置上,并确保点击它能够返回到最初的页面

      Good UI : [https://goodui.org/]
      10 Useful usability findings and guidelines [http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/]
      How to achieve a good website layout [http://naldzgraphics.net/tips/how-to-achieve-a-good-website-layout/]

    关于Label的位置

    在表单排版设计中,标签的位置如何摆放是一个很常见的问题,SitePoint上有一篇文章,完整地分析各种摆放的好处与坏处,非常值得阅读。

    [http://www.sitepoint.com/definitive-guide-form-label-positioning/]

    图片来源 : [https://www.flickr.com/photos/samodrole/5588196735]

更新:2014-07-18

收藏

336人已收藏

奧革士

奥革设计创办人,也是一位产品设计顾问

  • 8

    作品

  • 369

    粉丝

  • 94

    关注

  • 让 Eagle 帮你更有效的整理圖片素材與靈感
  • 让 Eagle 帮你更优雅管理图片素材
  • 那些界面动画设计需要瞭解的事情
  • 浅谈界面的空白状态设计(Empty State Design)

    猜你喜欢

      2014-07-18 原创文章 经验/观点 原作者: 原作者 举报 41601 336 102 9

      那些页面排版需要瞭解的事情

      0.0°

      你确定要举报那些页面排版需要瞭解的事情

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年07月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      102
      336
      9

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

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

      登录

      手机号

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

      登录
      第三方账号登录