修改导语:作为一名规划师,在日常作业时除了完结规划需求以外,更要对规划中的情感做研讨;许多时分用户在用产品时对视觉方面会有许多感觉,所以规划师需求合理的运用情感层面的原理进行改动和规划,咱们一起来了解一下。
好的规划不只能解决问题,还能为用户带来活跃的情感,并经过三个层面发生情感:
天性层:用户想要的感触;行为层:用户想要做什么;反思层:用户想要成为谁。作为规划师除了要把握根本的规划准则外,还需求对每个层面的情感以及发明情感的心理学原理有更深化的了解。
一、格局塔准则1. 类似准则人的眼睛会把具有类似特征的元素当成一个全体,以为这些元素具有相同的效果。
界面中的绿色图标具有相同的功用,便运用户快速认知和操作;因此在规划具有相同功用或内容的界面元素时,应该坚持一致性。
运用方位:导航、链接、按钮、内容页。
2. 接连准则用户倾向于把接连摆放的元素视为一个全体,这条准则与对称性和类似性密切相关;经过在序列上创立类似且重复的元素,引导用户的视野方向,使操作愈加连接和明晰。
只显露一部分的卡片会向用户宣布信号,标明滑动能够检查更多的书。
运用方位:菜单和子菜单、列表、产品页、轮播页。
3. 关闭准则当看到不完整的图画时,咱们会依据已有的经历把不完全关闭的图画当成一个一致的全体,这是在平面或logo规划中常用到的准则。
虽然页面右上方的饼图只显示了一部分,咱们依然能够轻松地辨认出来。
运用方位:图标、加载、数据可视化。
4. 附近准则人们会将互相相邻的元素视为一组。在规划时要注意运用距离将元素组合在一起;运用较大的距离来分隔大的内容组,再运用较小的距离来分隔大内容组中的小内容组。
页面上的每个卡片中都含有4组信息,很难快速辨认具体的内容。经过调整距离,能够将这些信息清楚地分为2组。
运用方位:导航、卡片、横幅、列表页、分页。
5. 对称准则咱们喜爱看到对称且平衡的事物,它是所规划范畴中最常用和最安全的准则,有助于营建一种安稳感和次序感。
对称的布局不只增强了用户的形象,还着重了中心的视频播放按钮。
运用方位:产品展现页、列表、导航以及任何内容丰厚的页面。
6. 一起区域准则经过信息分组和内容组织,完成内容的组合,有助于进步内容的层次结构和可扫描性。
卡片式UI有助于将信息分组并创立内容的层级深度。
运用方位:卡片、内容、服务、摘要。
7. 一起命运准则向同一方向移动的元素被以为比停止或向另一个方向上移动的元素更相关,这个准则有利于树立不同分组或状况之间的联络。
页面右侧的3个图形方向相同,有利于展现信息并让用户了解它们的功用。
运用方位:导航/下拉、折叠条目、东西提示、产品滑块、翻滚条。
二、焦点看东西时,咱们的视野往往会首要重视最杰出的元素。了解这种行为有助于咱们在规划中创立一个“锚点”,然后引导用户依照咱们规划的场景检查内容。
经过人物插画将用户的注意力引导到账单和人数等首要信息上。
运用方位:内容、登录页、产品页。
三、冯·雷斯托夫效应又称阻隔效应,相关于一般事情或物体,共同、有特征的事情或物体更简单被人记住;运用此准则的元素一般独立存在,不需求向用户导航额定的信息。
中心的晋级插画部分在整个页面上是独立存在的,而且招引注意力是召唤性用语或转化的要害。
运用方位:价格表、促销页、图标进口。
四、天性反响依据实际中的用户行为创立视觉上引人入胜的体会。例如看诙谐类视频的时分,假如在视频的高潮伴有笑声音效,咱们也会更简单跟着笑起来。
假如能让用户感觉良好和舒适,他们也会更喜爱咱们的规划。
运用方位:产品图、插图、拍摄。
五、色彩心理学许多研讨标明,色彩对咱们的潜意识有特别的影响;性别、宗教和文明对色彩的了解也有所不同。
关于色彩的运用,这张色彩心理学海报介绍了丰厚的办法。一起也要记住最广泛运用的体系色彩:赤色代表过错;绿色代表成功;蓝色代表进行中;黄色代表正告。
六、形状心理学同色彩相同,人们的潜意识对不同的形状也有不同的反响:
圆形、椭圆形:传达活跃的信息,一般与社区或联络有关;正方形、三角形:传达激烈的信息,一般与强度和安稳性有关;笔直线:标明强度或力气。水平线:标明安静、持平或安静。七、两层编码理论这个理论解说了人类需求视觉和言语信息来赶快处理信息,为了最大极限地进步规划的有用性,不应该删去必要的说明性文字。
大多数App的底部导航栏都运用图标与文字相结合的方法让用户快速知道功用。
另一个好的规划事例:
八、并行规划人眼倾向于看到平行要素比其他要素更相关,这一原理常常用来对同一页面中的两组不同内容进行分类。
运用笔直摆放的卡片代表相同的问题,水平摆放的卡片代表不同的问题。
九、公共区域这一原理类似于格局塔准则中的类似准则。公共区域经过运用线、形状或色彩区分的方法创立。
假如页面需求用户不断翻滚来检查内容,能够考虑运用色彩来更清楚地区分这些内容,而不只仅是运用距离。
十、扫描形式依据NNGroup、UXPin等规划集体的研讨,最常用的两种扫描形式是“F型”和“Z型”:
“F型”运用最为广泛,尤其是关于内容丰厚的网站。“Z型”用于那些文字信息少,最终需求着重用户点击类的网站。关于扫描形式更具体的内容能够检查我之前的文章:怎么构建直观有用的导航结构?
了解怎么运用这些形式后,咱们就能够有用地挑选布局和组织元从来完成规划方针。
十一、最终第一形象是最令人难忘的,好的体会能够在用户与产品之间树立耐久的联络。
渐渐来比较快,期望对你有协助~
作者:Clippp,微信大众号:Clip规划夹。每周精选规划文章,专心共享关于产品、交互、UI视觉上的规划考虑。
本文由 @Clippp 翻译发布于人人都是产品司理,未经作者答应,制止转载。
题图来自Unsplash,根据CC0协议。