交互设计学习:视觉优先级

2018/1/29

这是我在知群 M2 课程学习过程中的作业,将在复习时陆陆续续记录在这里。

  • 属性
    • 意义

      每个元素都有其存在的意义。在 designernews 网站中,左侧的徽章表示该条 news 属于什么类别。

    • 层级
      • 信息层级

        知群的课程主页分为动态、课程和关于三个部分,通过顶部的 tab 进行切换,以此来区分三个模块的信息层级高低。

      • 交互层级

        动态页面的底部右侧有一个悬浮按钮,它的颜色位置比较突出,以此获取更高的交互优先级,激励用户发布内容。

    • 类型
      • 通知

        很多软件有新版本时,会在个人设置的 tab 上显示一个小红点来通知用户。

      • 反馈

        微信清理空间结束后会弹出模态框告诉用户清理了多少空间。

      • 帮助

        Teambition 在用户鼠标浮动到一些图标上面时会弹出工具提示,告诉你这个图标的作用。

      • 警告

        Github 的危险操作使用红色的文字,并通过提示语告诉用户这是不可逆的操作,以此警告用户,防止误操作。

      • 余光

        淘宝的商品页面,一些主要操作比如加入购物车和立即购买一直处于页面底部,用户余光一扫就能看见。这样就方便了用户随时下单,促进购买。

    • 形式

      Framer 中文网导航栏中有一个宇航员小图标,在打开页面时有一个从上面跳下来的动画,吸引用户注意从而点击它。

    • 商业

      现在很多 App 都会在开屏页面中加入广告,以刺激用户购买。

    • 耐受性

      一般在确认弹框中,用户总是喜欢点击含有“取消”意义的按钮从而关闭它,支付宝口碑在这个确认弹框中故意将含有“确定”意义的按钮高亮显示,引导用户点击。

    • 品牌

      锤子的界面设计最大的特点是坚持拟物化,所以我们可以看到无论锤子的网站还是应用,全部都保持拟物化的风格,这让用户对其品牌的认知更加统一。

  • 重心
    • 视觉重心

      Indiegogo 首页的视觉重心在登录注册按钮上,以此来引导用户注册。

    • 引导

      在穷游行程助手中,首页通过一张卡片引导用户进入创建行程的教程。

    • 灰色

      Teambition 将已完成的任务文字颜色置灰,这样面板中所有任务的完成情况就一目了然了。

    • 留白

      Airbnb 首页的留白让信息重点一目了然。

  • 对象
    • 色彩、图像、材质、风格

      锤子的 Smartisan OS 在一种安卓手机的系统设计中很具有辨识性。它采用了拟物化设计,每个界面的设计都给人以真实的材质感,所运用的色彩很舒服,图像也给人一种很可爱的感觉。