手机版
注册
久久信息网,免费发布信息平台,欢迎发布和搜索新商机。
商标
广告

郑州网站建设:网页页面如何布局 会员等级

郑州网页设计,郑州网站建设,郑州做网站公司
  • 发布人: youke1
  • 价格: 面议
  • 电话: 18639432759  
  • 电子邮件: [email protected]
  • 腾讯QQ:  
  • 信息编号: 1419863
  • 公司名称:
  • 地址: 郑州市北三环金晨嘉园
  • 网址:
  • 联系人: 张先森
  • 浏览次数:
  • 进入会员空间
  • 认证情况
  • 发布时间: 2018-07-30 10:22:23
  • 所在地区: 河南 郑州
  • 分享信息1:
广告

信息详情

交互文档的输出就需要清晰的标注出层级,哪些需要重要展示,哪些信息可以弱化。交互稿可以通过颜色和区块的划分来展示页面的信息层级。这里值得注意的是:我们的主流程要避免多次跳转和弹窗的使用,这样会导致用户在复杂路径中迷失;也需要避免页面主次不清,信息在页面内大量堆叠。

    郑州网站设计的页面布局

    1、建立视觉层级的方法

    好的视觉层级会帮助用户提高获取和理解信息的效率,一般来说会从以下几个元素来表现:

    1)位置

    一般情况下,人眼对左上和中部的观察最佳,依次是右上、左下和右下,当然这也与书写习惯和文化因素有关。除此以外,大多数人的眼睛沿水平方向移动更加快速和不易疲劳,因此左右关注度的差别要小于上下关注度的差别。

    如果郑州网站设计的设计师想要体现并列关系的时候,左右排列会更佳,而想要拉开差距,上下排列更能突出。当然这也要根据实际情况来斟酌,例如信息过长过于复杂就会采用上下列表的形式,而同级并列的重要功能操作多数采用横向排列。

    另外,在上下关系中,用户会优先关注上部内容,例如网页设计中首屏的信息会比第二、三屏层级要高,所以在功能模块的布局中,同级的功能的尽量采用横向排列的方式。

    就下面两个模块的布局方式,第二种布局用户会不自觉认为前面两三个功能tab更加重要,越往下的功能越次要。

    2)大小

    重要的元素需要更大,可以通过拉开大小差距的手法突出重点。例如下面的QQ音乐的界面设计,使用图片的大小划分来抢夺用户的视线,从而达到视觉层级的划分。

    3)距离

    这里不得不提格式塔理论,也可以简单理解为接近性原则:

    人们在感知复杂的对象的时候,会有意识或者无意识地将接近的物体纳入到一个有组织的系统当中,而不是简单的视作为对象的集合,这是格式塔原理的基础。

    格式塔原理会适用到不同层次的认知当中,有的是显性的,有的则是隐性的,但是最有趣的是可视化的部分,也就是设计师借助这种原理所创造出来的各种设计。可以看下面左侧的图片,我们会非常自然的将元素在视觉上做了分组,这就是接近性原则的魅力。

    通过研究和验证,接近性原则中距离的接近,比起色彩和形状的近似,更容易被人所认知,下侧右图就很好的认证了这一观点。合理运用接近性原则能够让用户更轻松地获取信息,感知内容。很多时候,用户并没有准备好花费时间来学习复杂的界面,可以快速被感知和识别的信息,能更好的留住用户。

   4)色彩

   色彩在交互设计中应用较少,大都会采用灰色系的明暗来表现层级,然后采用一个彩色系来突出重要功能按钮。交互设计师对色彩的应用只需要达到界面层级清晰的目的,过于花哨的色彩反而会干扰逻辑的表达,也会误导UI设计师的认知。

   2、建立视觉层级的实例应用

   回到这次的设计实例“群发功能”来谈谈,在对用户行为做了层级划分后,我们可以开始着手进入页面布局,除了要运用一些理论方法以外,我们还需要进行一些实际场景的深入分析。通过以上用户流程的梳理,我大致将页面分为以下三个区块:选择对象区、编辑消息组区和群发记录区。我在页面视觉上做了层级划分:

   1)一级信息吸引用户:假设用户只会在当前页面停留较短的时间,一级页面就必须少而精,能够让用户快速理解页面信息,在设计上就需要重点展示该模块的主流程功能;

   群发模块的一级信息就是引导用户完成核心行为:

   这是一个较长的操作流程,并且并没有很强的步骤划分,例如用户可以先选择发送对象也可以先创建要发送的内容,设计师要做的是有效地通过界面语言引导用户完成操作,却也不能限制用户的操作习惯和行为,最优的界面布局是在做到清晰层级的划分的前提下支持多种操作场景。下面是我针对群发主流程的界面设计:

   2)二级信息补充理解:针对一级信息进行解释,提炼精华内容,帮助用户在尽量短时间内理解信息;

   群发模块的群发记录和相关操作可以在界面上相对弱化,只有当用户在特定的场景下才会成为视觉焦点。例如可以分别查看发送中的任务、定时任务和发送完成的记录,并且针对性的进行操作。

   另注:当多个发送任务在排队时,用户在浏览后会忽略正在发送的任务,从而对排队中的任务产生迷惑,这里我将正在发送的任务实时置顶,视觉上的焦点会帮助用户理解任务的进度。

   3)三级信息了解详情:一级和二级信息已经很好的解释,三级信息做补充,更多的做为一个展示或者入口,提供跳转功能。

   群发模块的三级信息是相对隐藏的,只有在特殊场景下才会启用,这里采用了弹窗的形式来完成操作。例如可以批量删除发送记录,每个消息组可以查看具体发送对象和复制内容等等。

   小结

   相对于纯理论的的文章,这篇文章更偏向于实践干货,当设计师拿到功能需求时不能盲目的着手设计,需要经过以上的分析和归纳,深入用户的使用场景,对于较为复杂的功能软件,设计阶段需要反复斟酌页面布局和功能按钮的布局,利用多种建立视觉层级的方法来指导设计。最后希望这篇文章能够帮助到大家,大家有什么不明白和不理解的地方也欢迎留言。

郑州网站建设www.yooker.net


联系我时请说明是从久久信息网看到的,这样我会给你较大的优惠!
广告
声明:信息由用户自行发布,采用请谨慎,我们鼓励您当面交易。 久久信息网只为传递信息,我们不做任何双方证明,也不承担 任何法律责任。 信息转载,请标明来源于www.99inf.com。

留言(1000字以内)

发布留言
广告
广告