傻瓜式教你网页设计布局中的小技巧

网络营销评论76

 傻瓜式教你网页设计布局中的小技巧-图片1编者按:这个系列的教程到目前为止有共125个实用技巧,本章先列举17个,每一个技巧都有案例对比,保证简单易懂。今天@企业官网设计精选 翻译了第一部分 —— 在网页设计中如何引导用户的注意力。学会一个就能受用无穷,更别说这一章整整有17个具体的方法了。

  在界面中突出强调一个聚焦点

  每个界面都应该有一个清晰的起点。用户应该从哪里看起?要设计清楚。

傻瓜式教你网页设计布局中的小技巧-图片2

  △ UX策略1 – 在页面标题部分添加视觉对比

  通过视觉的层次引导用户

  通过界面引导控制用户体验。他们应该从哪里先看起,第二和第三步又看哪里?设计要建立层次结构。

傻瓜式教你网页设计布局中的小技巧-图片3

  △ UX策略2 – 避免在构图中补漏留白

  

傻瓜式教你网页设计布局中的小技巧-图片4

  △ UX策略3 – 使用单列布局

  

傻瓜式教你网页设计布局中的小技巧-图片5

  △ UX策略4 – 重叠设计元素,强调连续性

  使用格式塔原则进行布局设计

  根据格式塔心理学,人会通过简化感知克服混乱。所以我们将事物分组,将元素分类,我们看“整体”。

  这些原则包括:相似,接近,闭合,连接,连续和图形/背景。

  

傻瓜式教你网页设计布局中的小技巧-图片6
傻瓜式教你网页设计布局中的小技巧-图片7

  △ UX策略5 – 按照接近性将相似功能或菜单项分组显示

  

傻瓜式教你网页设计布局中的小技巧-图片8

  △ UX策略6 – 标题位置与对应章节内容更靠近

  

傻瓜式教你网页设计布局中的小技巧-图片9

  △ UX策略7 – 限制标题与章节内容在同一界限内

  在不干扰用户的前提下呈现界面变化

  有一些界面变化会发生在用户使用期间,这些变化要做到明显但不干扰用户。

  

傻瓜式教你网页设计布局中的小技巧-图片10

  △ UX策略8 – 用明显的动画呈现界面变化

  

傻瓜式教你网页设计布局中的小技巧-图片11

  △ UX策略9 – 将出错的元素区分显示出来,错误提醒信息放置在表单顶部

  删除或弱化不必要的信息

  人的注意力是有限的。不必要的元素会消耗这些注意力。因此,保持用户专注在重要信息和功能上。

  

傻瓜式教你网页设计布局中的小技巧-图片12

  △ UX策略10 – 弹出或模态窗口背景模糊处理

  

傻瓜式教你网页设计布局中的小技巧-图片13

  △ UX策略11 – 在所有图像中最大限度地提高数据墨水比率(让数据更凸显)

  

傻瓜式教你网页设计布局中的小技巧-图片14

  △ UX策略12 – 去掉不必要的边框

  

傻瓜式教你网页设计布局中的小技巧-图片15

  △ UX策略13 – 删除冗余或不言自明的说明

  

傻瓜式教你网页设计布局中的小技巧-图片16

  △ UX策略14 – 隐藏不常用但必要的设置、功能和信息

  提示首屏以下是否还有内容

  现在大多数浏览器在页面处于非活动状态时隐藏滚动条,你需要“滚动提示”告知用户首屏以下是否还有内容

  

傻瓜式教你网页设计布局中的小技巧-图片17

  △ UX策略15 – 通过首屏延伸页面下方信息元素

  

傻瓜式教你网页设计布局中的小技巧-图片18

  △ UX策略16 – 添加阴影以指示深度

  

傻瓜式教你网页设计布局中的小技巧-图片19

  △ UX策略17 – 用文字或图形表示有更多内容

  未完待续…广告之后下集更精彩

傻瓜式教你网页设计布局中的小技巧-图片20

 
百度权重值是什么?分别是多少? 网络营销

百度权重值是什么?分别是多少?

快速提高网站pr值的4种方法与1个注意事项无论是在友情链接交换中,还是对方网站流量的考察中,百度权重是了解一个网站在SEO指标上最直观的数据。特别是一些新站,在友情链接交换的时候如果权重过低甚至是没有...
马云背后仰仗的神秘人物们 网络营销

马云背后仰仗的神秘人物们

1、蔡崇信:阿里巴巴的神秘财神爷2、孙正义:阿里上市的最大推手4、陆兆禧:最了解阿里巴巴的那个人6、关明生:塑造阿里巴巴价值观的人鼎华网络承诺:先服务,后付费!无效退款!鼎华使命:帮助中小企业实现品牌...
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: