美文网首页
003:《别让我思考》如何用来指导简历界面设计

003:《别让我思考》如何用来指导简历界面设计

作者: Arvin_Zhao | 来源:发表于2015-10-10 19:50 被阅读1031次

    《别让我思考》简介:一本关于web可用性设计的一本书,然而其中的经验不仅适用于web,对任何需要阅读理解的应用界面都有参考价值

    所以本文是个人在阅读本书过程中,将对个人最有价值的信息提炼出来的结果,并且本文也尝试着将书中提到的思维方式和技巧应用到 -- 简历样式设计,以及尝试着分析一些手机应用是否也采用了这些技巧。

    (上述提到的两方面均在web设计之外,是为了证明《别让我思考》的内容确实可以适用到web设计之外的其他界面设计)

    本文不是读书笔记,所以并不会将书中全部知识点都罗列出来,见谅。


    书中知识点1:用户如何使用界面?

    扫描 + 尝试,而不是:阅读 + 选择

    究其原因,因为这样子更懒,需要花费的脑筋更少。

    那么,对于扫描+尝试的界面使用习惯,什么样的设计更能符合用户的需求呢?

    1.视觉上利于扫描。因为扫描的目的是有价值的信息,对于不同价值的信息,有合理的展示方式,从而,用户可以非常轻松的获得需要的信息

    2.对尝试行为友好。相对简单,只需要让页面跳转之后均为可返回即可。

    书中知识点2:如何让界面更利于扫描?

    1.视觉层级设计

    2.采用习惯用法

    3.界面降噪

    4.字数缩减

    首先来看看腾讯网如何让页面变得更加利于扫描:

    腾讯网如何让页面利于扫描

    1.视觉层级设计:将页面划分成有明确定义的区域,并为之建立清晰的视觉优先级,突出重要的区域

    主要方法可以通过以下3种方式来提升区域的视觉优先级,最终达到不同区域有重要性区分的效果:

    三种增加区域优先级的方式

    色块区分:

    通过色块颜色区分,突出分类项目的优先级,使之在视觉优先级上高于下面的具体文章标题部分

    图片优先:

    被文字包围的图片的优先级远远高于文字

    文字样式:

    通过文字颜色,加深,字体大小来调整优先级

    2.使用习惯用法,链接,按钮等存在交互操作的对象,使用已经众所周知的交互样式,最大限度降低学习成本

    链接hover态显示下划线,颜色变成紫色或者红色 选项卡选中样式

    3.降低视觉噪音:间隔线的作用在于将界面切分成不同的区域,然而间隔线不是主角。让用户感知到有间隔就行,不需要太刺眼的间隔线。

    间隔线处理:

    1. 颜色不应太明显,尽量与背景色不要有太大反差

    2. 宽度不应太粗

    间隔线的样式应该能够满足,用户在阅读内容的时候不会注意到间隔线的存在,但是却能够起到切割分块视觉区域的作用,深藏功与名。

    深藏功与名的间隔线

    4.文字缩减到最少:欢迎词,指示说明词全部去掉。去掉不那么重要的文字

    没法再删除任何文字的示例,全部都是关键字

    如何让界面利于扫描 -- 小结:

    1. 为页面建立清晰的视觉优先级,突出重要的区域

    2. 使用习惯用法,降低学习成本

    3. 降低视觉噪音,弱化分割线等辅助内容

    4. 减少不必要的文字

    如果把上面的观点应用到简历界面会如何?

    1. 色块区分

    借助色块突出希望面试官第一眼看到的部分,有两个作用:

    1.是让扫描阅读变得更加简单,通过色块引导面试官,降低阅读成本

    2.让简历整体色调更加丰满,颜色不会过于单调

    是否通过底色区分简历区域的不同视觉效果

    2.关于图片:个人照片 -- 二维码链接

    个人照片:无论如何,只要放到简历上,绝对就是第一视觉优先级的内容,慎放(除非照片拍的足够正式专业且形象气质俱佳,无可挑剔)

    二维码链接:可将自己的作品集展示web页面链接转成二维码放在简历上,同样是高视觉优先级的内容。

    非常醒目的个人照片与有意思的作品展示入口

    3.字体样式

    通过字体样式呈现3个不同的阅读优先级

    4.降噪

    调整,弱化分割线视觉效果

    (由于简历部分涉及个人隐私,所以本文将关键信息均模糊处理)

    ----end---

    欢迎交流

    相关文章

      网友评论

          本文标题:003:《别让我思考》如何用来指导简历界面设计

          本文链接:https://www.haomeiwen.com/subject/bvoncttx.html