词条信息

admin
admin
超级管理员
词条创建者 发短消息   

相关词条

热门词条

更多>>
大数据生态圈是什么?
大数据这个概念本身就太大而且太宽,如果一定要严格定义是非常[详细]
PS锐化工具修复模糊照片
  平时我们看到很多文章介绍的都是把清晰的照片模糊处理化,那如[详细]
Xcode使用入门教程
Xcode是一个款强大的IDE开发环境,就像你在写Window[详细]
手机VoLTE是什么意思?
有网友会发现自己的手机上有个“VoLTE”图标或者“HD”[详细]
10月1日起执行个税新税率表!新在哪?减多少?
  千龙网北京9月28日讯(记者 郑雪)2018年8月31日,[详细]
解决网 >>所属分类 >> 网页设计    技术经验   

网页设计的十大原则

标签: 网页设计

顶[0] 发表评论(0) 编辑词条

  随着时代的进步,网页设计的风格也在变更,互动元素越来越多,色彩样式也越来越多样化。但是不论设计风格如何改变,其中遵循的原则确是一直未改变的。本文中青岛新锐建站整理了网页设计中的十大原则: www.solves.com.cn 电脑百科

目录

[显示全部]

1. 亲密性编辑本段回目录

www.solves.com.cn 电脑百科

  如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元。反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。 www.solves.com.cn 电脑百科

2. 对齐编辑本段回目录

www.solves.com.cn 电脑百科

  文案类对齐 www.solves.com.cn 电脑百科

  如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点,一般文案左对齐。 www.solves.com.cn 电脑百科

  表单类对齐 www.solves.com.cn 电脑百科

  冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。

www.solves.com.cn 电脑百科

网页设计中的表单类对齐
www.solves.com.cn 电脑百科

  数字类对齐

www.solves.com.cn 电脑百科

  为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。

www.solves.com.cn 电脑百科

  这里其实讲的就是网页设计中的一个标准,所有模块开发都是基于标准进行,不至于杂乱无章。 www.solves.com.cn 电脑百科

3. 对比编辑本段回目录

www.solves.com.cn 电脑百科

  主次关系对比

www.solves.com.cn 电脑百科

  为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。

www.solves.com.cn 电脑百科

  总分关系对比 www.solves.com.cn 电脑百科

  通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。 www.solves.com.cn 电脑百科

  状态关系对比

www.solves.com.cn 电脑百科

  通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。常见类型有「静态对比」、「动态对比」。 www.solves.com.cn 电脑百科

4. 重复编辑本段回目录

www.solves.com.cn 电脑百科

  相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

www.solves.com.cn 电脑百科

  重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。再比如网站中同类别的页面设计,采用同样的设计风格,让用户明确了解两个页面属于同种分类等等。 www.solves.com.cn 电脑百科

5. 直截了当编辑本段回目录

www.solves.com.cn 电脑百科

  需要在哪里输出,就要允许在哪里输入,不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。常见方法有单字段行内编辑、多字段行内编辑、直接拖放、直接选择等。 www.solves.com.cn 电脑百科

  单字段行内编辑 www.solves.com.cn 电脑百科

  当「易读性」远比「易编辑性」重要时,可以使用「单击编辑」。当「易读性」为主,同时又要突出操作行的「易编辑性」时,可使用「文字链/图标编辑」。 www.solves.com.cn 电脑百科

  多字段行内编辑 www.solves.com.cn 电脑百科

  编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。

www.solves.com.cn 电脑百科

6. 足不出户编辑本段回目录

www.solves.com.cn 电脑百科

  能在这个页面解决的问题,就不要去其它页面解决。 www.solves.com.cn 电脑百科

  覆盖层 www.solves.com.cn 电脑百科

  二次确认覆盖层:避免滥用 Modal 进行二次确认,应该勇敢的让用户去尝试,给用户机会「撤消」即可。比如某些弹出的小窗口,不论用户在小窗口内进行如何操作,页面依旧保持不跳转。比如淘宝中商品图片的放大。 www.solves.com.cn 电脑百科

网页设计表单嵌入层
www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

  列表嵌入层:在列表中,显示某条列表项的详情信息,保持上下文不中断。

www.solves.com.cn 电脑百科

  网页设计表单嵌入层 www.solves.com.cn 电脑百科

  流程处理 www.solves.com.cn 电脑百科

  渐进式展现:基于用户的操作/某种特定规则,渐进式展现不同的操作选项。 www.solves.com.cn 电脑百科

  配置程序:通过提供一系列的配置项,帮助用户完成任务或者产品组装。

www.solves.com.cn 电脑百科

  弹出框覆盖层:虽然弹出框的出现会打断用户的心流,但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。

www.solves.com.cn 电脑百科


www.solves.com.cn 电脑百科

7. 简化交互编辑本段回目录

www.solves.com.cn 电脑百科

费茨法则:如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。 www.solves.com.cn 电脑百科

实时可见工具

www.solves.com.cn 电脑百科

如果某个操作非常重要,就应该把它放在页面中,并实时可见。该种工具在长的浏览页面中尤其常见,比如返回顶部等等。 www.solves.com.cn 电脑百科

悬停/点击即现工具 www.solves.com.cn 电脑百科

如果某个操作不那么重要,或者使用「实时可见工具」过于啰嗦会影响用户阅读时,可以在悬停在该对象上时展示操作项,比如常见的分享或评论按钮,整体按钮会过长可能影响用户体验,此时将其整合为一个小按钮,当鼠标悬停或点击时则展开,离开时则关闭。

www.solves.com.cn 电脑百科

微博评论按钮点击前: www.solves.com.cn 电脑百科

微博的评论点击即现 www.solves.com.cn 电脑百科

微博评论按钮点击后,如图所示展开: www.solves.com.cn 电脑百科

微博评论按钮点击后展开
www.solves.com.cn 电脑百科

  www.solves.com.cn 电脑百科

开关显示工具 www.solves.com.cn 电脑百科

如果某些操作只需要在特定模式时显示,可以通过开关来实现。

www.solves.com.cn 电脑百科

交互中的工具

www.solves.com.cn 电脑百科

如果操作不重要或者可以通过其他途径完成时,可以将工具放置在用户的操作流程中,减少界面元素,降低认知负担,给用户小惊喜。 www.solves.com.cn 电脑百科

可视区域 ≠ 可点击区域

www.solves.com.cn 电脑百科

在使用 Table 时,文字链的点击范围受到文字长短影响,可以设置整个单元格为热区,以便用户触发。当需要增强按钮的响应性时,可以通过增加用户点击热区的范围,而不是增大按钮形状,从而增强响应性,又不缺失美感。

www.solves.com.cn 电脑百科

8. 提供邀请编辑本段回目录

www.solves.com.cn 电脑百科

邀请就是引导用户进入下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。 www.solves.com.cn 电脑百科

静态邀请 www.solves.com.cn 电脑百科

引导操作邀请:一般以静态说明形式出现在页面上,不过它们在视觉上也可以表现出多种不同样式。 常见类型:「文本邀请」、「白板式邀请」、「未完成邀请」。比如相关文章链接等等。 www.solves.com.cn 电脑百科

漫游探索邀请:是向用户介绍新功能的好方法,尤其是对于那些设计优良的界面。但是它不是「创口贴」,仅通过它不能解决界面交互的真正问题。 www.solves.com.cn 电脑百科

动态邀请 www.solves.com.cn 电脑百科

悬停邀请:在鼠标悬停期间提供邀请。

www.solves.com.cn 电脑百科

推论邀请:用于交互期间,合理推断用户可能产生的需求。 www.solves.com.cn 电脑百科

更多内容邀请:用于邀请用户查看更多内容。

www.solves.com.cn 电脑百科

9. 巧用过渡编辑本段回目录

www.solves.com.cn 电脑百科

在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。 www.solves.com.cn 电脑百科

在视图变化时保持上下文

www.solves.com.cn 电脑百科

滑入与滑出:可以有效构建虚拟空间。 www.solves.com.cn 电脑百科

传送带:可极大地扩展虚拟空间。

www.solves.com.cn 电脑百科

折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。

www.solves.com.cn 电脑百科

解释刚刚发生了什么

www.solves.com.cn 电脑百科

对象增加:在列表/表格中,新增了一个对象。

www.solves.com.cn 电脑百科

对象删除:在列表/表格中,删除了一个对象。 www.solves.com.cn 电脑百科

对象更改:在列表/表格中,更改了一个对象。 www.solves.com.cn 电脑百科

对象呼出:点击页面中元素,呼出一个新对象。 www.solves.com.cn 电脑百科

改善感知性能 www.solves.com.cn 电脑百科

当无法有效提升「实际性能」时,可以考虑适当转移用户的注意力,来缩短某项操作的感知时间,改善感知性能。 www.solves.com.cn 电脑百科

10. 即时反应编辑本段回目录

www.solves.com.cn 电脑百科

「提供邀请」的强大体现在交互之前给出反馈,解决易发现性问题;「巧用过渡」的有用体现在它能够在交互期间为用户提供视觉反馈;「即时反应」的重要性体现在交互之后立即给出反馈。 www.solves.com.cn 电脑百科

查询模式 www.solves.com.cn 电脑百科

自动完成:用户输入时,下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少,可以分为「确定类目」、「不确定类目」两种类型。

www.solves.com.cn 电脑百科

实时搜索:随着用户输入,实时显示搜索结果。「自动完成」、「实时建议」的近亲。

www.solves.com.cn 电脑百科

微调搜索:随着用户调整搜索条件,实时调整搜索结构。

www.solves.com.cn 电脑百科

反馈模式 www.solves.com.cn 电脑百科

实时预览:在用户提交输入之前,让他先行了解系统将如何处理他的输入。 www.solves.com.cn 电脑百科

渐进式展现:在必要的时候提供必要的提示,而不是一股脑儿显示所有提示,导致界面混乱,增加认知负担。

www.solves.com.cn 电脑百科

进度指示:当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通。 www.solves.com.cn 电脑百科

点击刷新:告知用户有新内容,并提供按钮等工具帮助用户查看新内容。 www.solves.com.cn 电脑百科

定时刷新:无需用户介入,定时展示新内容。 www.solves.com.cn 电脑百科

 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-3479.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇降低内容营销效果的因素
下一篇2017年SEO行业的前景

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>