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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
提高您视觉设计的三个技巧
0.0°
2017-07-27 自译外文 经验/观点 原作者: Jules Cheung 举报 1032 3 1 0

提高您视觉设计的三个技巧


一、建立视觉层次

二、使用格式塔原理

三、检查你的字体 



一、建立视觉层次

视觉层次是由相对重要性次序组织信息,并通过在排列部件(排版,线条,形状,图像,颜色和空间)其既定布局。具有强视觉层次和组合的设计将通过无缝引导您的眼睛传达信息。例如,我们来看看Airbnb如何在他们的网站上安排组件:

Image title


你的眼睛在哪里看起来和什么顺序?如果您不确定,请尝试将页面转换为黑白。注意你的眼睛如何被吸引到更大和更深(更饱和)的组件。


Image title


通过排列组件首先传送高优先级信息和低优先级信息来建立视觉层次。这通常是将用户需求与业务目标平衡的动作。对于Airbnb,业务目标是增加与工作相关的帐户的注册,而用户需要搜索的地方留下来。换句话说,业务目标在这个页面上胜过用户需求。

强大的视觉层次和组合将引导您的眼睛流畅的布局。视觉层次差可能导致沟通不畅或混乱。


Image title

通过创建使用不同组件样式的设计的许多变体来实践建立视觉层次,并在您感到卡住时使用黑白技术。几个组件提示:


字体 - 更大和更大胆的字体捕捉注意力,应谨慎使用标题。


线条  - 线条可帮助分隔信息组,作为布局网格,并可能填满尴尬的空白。


颜色  - 更深和更饱和的颜色引起更多的关注。


形状 -简单的形状(圆形,三角形,正方形)通常更美观。


图像  - 图像可以诱人,但尽量远离股票摄影。


空间 - 空间是你最好的朋友。使用它来分隔信息组或隔离(突出显示)重要的事物。




二、 使用格式塔原理

所有设计师都应该了解格式塔理论和视觉感知原理。格式塔理论是由德国心理学家在二十世纪初开发的,他们理论化人类组织视觉体验的方式。设计师现在使用格式塔原理作为更有效的视觉传达的框架。


图与背景

通常地面是图(物体)存在的背景。我们的目标是保持专注于数字,并明确从背景区分。具有高对比度颜色的设计将建立更强的图与背景的关系,而具有低对比度颜色的设计将具有较弱的关系。新手应该保持背景简单(浅色或微妙的纹理),并限制数字的颜色数量。

Image title

(相信英文大家都认识 就当学习了)




接近

邻近的物体将视觉上团结成一组。接近度可以与颜色相结合,使群体更加明显。相邻的空间 - 可以加强分组或隔离不相关的对象。

Image title




连续性

人眼继续按照顺序排列的线条,曲线或物体。当连续的物体与其他物体相交时,我们的眼睛自然地将这些物体看作是不同的物体(不分组)。使用颜色进一步增强连续性和流动性。

Image title



闭合性

不完整的物体或未完全封闭的空间被认为是完整的,因为我们的大脑填补了缺失的空白。设计人员可以使用关闭的原则来创建视觉引人注目的图形。

Image title




三、检查你的字体

设计人员应确保这些单词清晰可读。使用排版,有以下几个最佳做法:

从2种字体开始

字体是一种特定尺寸和重量的字体(又称字体系列)

经验法则是以1个标题字体和1个不同字体的正文字体开头,并且每个布局使用不超过2-3个字体。您拥有的标题或样式越多(引号,链接等),您需要的字体越多。下图使用2个字体(Lucida Grande和Cambria)和7个不同形态。

Image title


14px最小体型字体

行高= 1.5-2x字体大小

线高是指段落中句子之间的空格。线高度过小会使文字感到挤压,线条高度过大会导致句子断开连接。

最佳句子字符数 - 66个字符

每个句子的字符数是确保可读性的关键。太长的句子很难跟踪,而太短的句子则会破坏阅读节奏。





其他视觉设计提示


当垂直居中的物体时,将其略高于真实中心,以适应视觉错觉




 这么好看的码 真的可以关注

Image title





更新:2017-07-27

收藏

3人已收藏

Armer

优秀不够 你是否无可替代

  • 12

    作品

  • 3

    粉丝

  • 13

    关注

  • 咪咕爱看 优化
  • 关于界面动效设计的几点建议
  • 飞鸟集
  • 零食小铺

    猜你喜欢

      2017-07-27 自译外文 经验/观点 原作者: Jules Cheung 举报 1032 3 1 0

      提高您视觉设计的三个技巧

      0.0°

      你确定要举报提高您视觉设计的三个技巧

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年07月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      3
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录