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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
《认知与设计》读书笔记(1)
0.0°
2018-08-10 原创文章 规范/资料 举报 2382 8 8 0

知道一些设计准则,我们就更容易判断哪些方案会失败,自己进行设计时尽可以少走很多弯路。——王坚

一、 探索和利用视觉结构

(1)      信息呈现方式越是结构化和精炼,人们就越能更快、更容易地浏览。

在这里我对比了两个在线旅行服务网站,去哪儿网和携程网。从图可以看出,两个度假页面相比携程网的会更加精炼,用户在完成一个目标时,更容易浏览。

去哪儿网去哪儿网

Image title

携程网


(2)      一个长串的数字可以利用两种方式分隔:用户界面明确地为不同部分提供独立字段,或者界面提供一个字段,但是允许用户输入时将号码用空格或其他字符分隔开。

下图为中国建设银行的账号输入方式,因为银行卡号都比较长,所以要提供数字分隔。

Image title


(3)视觉层次能够让人从与其目标不相关的内容立刻区分出与其目标更相关的内容,如果要提供一个视觉层次,即信息的安排能够:

A、将信息分段,把大块的信息分割为各个小段

支付宝APP就在首页将信息分为了三部分,由字体和图标的大小来区分层次。

Image title


B、显著标记每个信息段和子段,以便清晰地确认各自的内容


C、以一个层次结构来展示各段及其子段,使得上层的段能够比下层得到更重点的展示。

下图为网易云音乐APP电台分类列表的界面设计,上层的文字与下层文字通过字体颜色和大小来进行了很好的区分。

Image title



二、 使用色彩的准则

(1)      用饱和度、亮度以及色相来区分颜色

避免采用轻微的差别,确保颜色之间有较高的反差。一个测试颜色差异的办法是在灰度模式下观察,如果你不能在灰度模式下区分出不同的颜色,那么这些颜色的差别就不够。

Image title图片中的上半部分为QQ音乐的分类。从颜色看五个部分都使用了可以很好区分的色相,但是从灰度图看,“流行指数”部分和“热歌”部分灰度比较相似,可以再加以区分一下。

下半部分为图虫网站的一个分类部分,在色相部分也是进行了加以区分,从灰度图看采用了有规律的分布,这样相邻的两个就很好区别开来。


(2)      使用独特的颜色

使用最轻易区分的颜色:红、绿、蓝、黄、黑、白

Image title



(3)      避免使用色盲的人无法区分的颜色对

深黑+红     深红+深绿     蓝色+紫色     浅绿+白色

不要在任何深色背景上使用深红色额,蓝色或紫色,但是可以在浅色背景上使用这些颜色。


(4)      在颜色之外使用其他提示(如形状、文字)


Image title

只使用颜色
Image title

颜色+形状


(5)      将强烈的对抗色分开,因为放在一起的对抗色会产生令人难受的闪烁感觉。

Image title


另外,我们的眼睛对蓝色和紫色不如对其他同颜色敏感,而且人类的视觉系统对于对比度敏感


更新:2018-08-10

收藏

8人已收藏

老萌芽

没啥经验,先从读书提升自己

  • 10

    作品

  • 9

    粉丝

  • 8

    关注

  • 界面临摹练习01
  • 交互设计精髓读书笔记
  • 交互设计精髓读书笔记
  • 《交互设计精髓》读书笔记

    猜你喜欢

      2018-08-10 原创文章 规范/资料 举报 2382 8 8 0

      《认知与设计》读书笔记(1)

      0.0°

      你确定要举报《认知与设计》读书笔记(1)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年08月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      8
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录