Web_app设计准则

合集下载

Web app设计准则

Web app设计准则

Web app设计浅谈HTML5技术的强势发展,为互联网带来的最大改变就是:web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。

Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主。

本文将围绕web app的设计,与大家讨论几点设计技巧。

什么是web app?Web app是一种通过网络(如互联网或内联网)访问的应用程序;也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并依赖于web 浏览器来渲染的应用程序。

Web app的流行归功于网页浏览器的普及,以及使用这一轻薄客户端方便的用户体验。

不必下载安装就可以实现更新和维护,具有支持跨平台的内在属性,是web app 开始流行的关键原因。

典型的web app产品包括web邮箱、web商店、wikis等等。

Web app的优点◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤;◆浏览器应用程序几乎不需要客户端上的磁盘空间;◆新功能从服务器自动传递给用户,用户自己不必升级程序;◆可以轻松整合进入其他服务类web程序;◆跨平台的兼容性现阶段web app还很难有一个设计原则HTML5技术仍在发展中且发展尚不完善,web app作为该技术的产物自然也是在不断试验中进步;此外,web app还要依赖兼容性浏览器更强大的渲染能力,俗话说“皮之不存毛将焉附”,在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。

在这种行业背景下,web app还难以有一个所谓的设计原则,起码现在还不构成总结一个合理设计原则的条件。

其实,所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。

比如,解构主义设计风格的提出不是之前就有的,是理论家在分析总结了建筑设计师盖里、埃森曼、特斯楚米等大师的典型设计作品,结合这几位大师的设计理念后定义的一个流派名称。

Web开发中的用户界面设计原则与实践

Web开发中的用户界面设计原则与实践

Web开发中的用户界面设计原则与实践随着互联网的迅猛发展,Web应用开发变得与人们的日常生活息息相关。

为了吸引用户的注意力并提供良好的用户体验,设计一个符合人类习惯和心理的用户界面变得尤为重要。

本文将探讨Web开发中的用户界面设计原则与实践,并介绍一些实用的设计技巧。

一、用户界面设计的原则1. 易用性:一个好的用户界面应该易于学习和使用。

对用户而言,能够迅速上手并理解如何操作是至关重要的。

因此,在设计用户界面时,要尽量减少学习成本和认知负荷,采用简单明了、直观的设计。

2. 一致性:用户界面应该在整个Web应用中保持一致。

这意味着相似的功能应该具有相似的外观和交互方式,以便用户能够快速适应新页面或模块。

一致性还包括使用统一的图标、颜色和布局,以帮助用户建立起对系统的熟悉感。

3. 可见性:重要的功能和选项应该是显而易见的,而不是隐藏在菜单深处。

通过使用明亮的色彩、醒目的图标和明确的文字,将关键操作呈现给用户,从而增加系统的可见性和可用性。

4. 弹性和适应性:用户界面应该具备弹性和适应性,能够适应不同设备、不同屏幕尺寸和不同分辨率的要求。

响应式设计和自适应布局可以实现界面的弹性和适应性,使得Web应用在不同平台和设备上都能够提供一致的用户体验。

二、用户界面设计的实践1. 简洁明了的布局:一个好的用户界面应该具备简洁明了的布局。

使用白色空间和合理的视觉分割可以帮助用户快速浏览页面,并且使界面看起来更加整洁美观。

避免过多的信息和功能堆砌,保持界面的简洁性。

2. 有重点的色彩:色彩能够吸引用户的注意力,因此在用户界面设计中要有意识地使用色彩。

通过合理运用鲜艳的色彩和对比,突出重要的按钮、链接或提示,引导用户的注意力,提高界面的可用性。

3. 清晰简洁的文字:界面上的文字应该简洁明了,避免使用过长或晦涩的语句。

使用简短的文案和清晰易懂的词汇,帮助用户迅速理解界面的功能和操作方式。

4. 合理的交互方式:用户界面的交互方式应该符合用户的习惯和心理。

web界面设计原则

web界面设计原则

web界面设计原则Web界面设计是指设计人们在互联网上浏览、交互的界面,旨在提供用户友好、易用、美观和功能完善的网页体验。

在进行Web界面设计时,应遵循一些原则,以确保设计的界面能够符合用户需求、提供良好的用户体验。

下面是一些常见的Web界面设计原则和相关参考内容,以供参考。

1. 一致性原则(Consistency)一致性原则指的是在整个网站上保持设计、布局、交互方式等的一致性,使用户在不同页面间能够轻松地进行导航和使用。

参考内容:设计师应使用统一的色彩、字体、按钮样式等元素,确保不同页面的风格和布局相似。

2. 简洁性原则(Simplicity)简洁性原则要求界面设计简洁明了,不添加过多的不必要元素和信息。

参考内容:避免使用过多的颜色、图片或文字,注重排版和布局的简洁美观,使用户能够快速理解和使用界面。

3. 易用性原则(Usability)易用性原则强调设计的界面应易于使用和理解,不需要用户花费过多的时间和精力去学习和使用。

参考内容:设计可见且易于理解的导航菜单,使用明确的按钮标签和信息提示,提供搜索功能和快速访问常用功能的方式等。

4. 可访问性原则(Accessibility)可访问性原则强调设计的界面应考虑到不同用户的需求,包括身体上的残疾、技术上的限制等。

参考内容:使用无障碍技术,如正确使用HTML标记、提供替代文字等,帮助用户使用屏幕阅读器等辅助技术访问网页内容。

5. 可读性原则(Readability)可读性原则要求界面上的文字和内容易于阅读和理解。

参考内容:选择易读的字体、合适的字体大小和行距,使用高对比度的颜色组合,保持文本和背景的明显分离等。

6. 反馈原则(Feedback)反馈原则指的是为用户提供即时、明确的反馈信息,让用户知道他们的操作是否成功。

参考内容:使用动画、弹出窗口或改变按钮状态等方式给出操作反馈,及时更新页面内容,并提供合适的错误提示和帮助信息。

7. 性能原则(Performance)性能原则要求界面设计应快速响应用户的操作和请求,减少等待时间。

网站及APP界面设计规范(精选)

网站及APP界面设计规范(精选)

网站及APP界面设计规范(精选)一、概述在当今数字化时代,互联网已经成为人们获取信息、进行交流和娱乐的重要平台。

而网站和APP作为互联网的主要入口,其界面设计对于用户体验起着至关重要的作用。

良好的界面设计不仅能提升用户的使用体验,还能增加网站和APP的吸引力,促使用户产生持续的使用欲望。

本文旨在探讨网站及APP界面设计的规范,为设计师和开发者提供一些实用的指导原则和技巧。

二、布局设计1. 明确的导航条导航条是用户在网站和APP中进行导航和浏览的重要工具,因此应该保持明确、简洁和易于使用。

导航条的位置应该放置在用户视线范围内,通常位于页面的顶部或左侧。

导航条上的链接命名应该准确描述对应的页面或功能,避免使用过于晦涩的词语。

2. 统一的页面风格为了让用户在使用网站和APP时感受到一致的风格和氛围,设计师应该保持页面的统一性。

统一的页面风格包括颜色、字体、图标等方面的设计。

使用一种主题颜色来塑造品牌形象,并确保页面内容与之协调一致。

选择一种易读的字体,并在整个平台上保持一致。

图标的风格应简洁明了,便于用户理解。

3. 响应式设计随着移动设备的普及,响应式设计已经成为网站和APP设计的标准要求。

响应式设计能够使网站和APP能够自动适应不同设备的屏幕大小和分辨率,保证用户在不同终端上都能够获得良好的使用体验。

三、交互设计1. 简洁明了的操作流程用户访问网站和APP主要是为了获取信息或完成特定的任务,因此操作流程的简洁明了对于用户体验非常重要。

保持页面内容的简洁性,避免复杂的设计元素和干扰用户的功能。

同时,通过明确的提示和指引,引导用户进行下一步操作,减少用户的操作迷茫感。

2. 易于理解的反馈机制用户在使用网站和APP时,需要清楚了解自己操作的结果。

设计师应该给予明确的反馈,告知用户他们的操作是否成功,并及时提醒用户状态的变化。

比如,通过颜色变化、提示信息或动画效果等方式,让用户直观地感知到他们的操作。

3. 合理的交互元素排列交互元素的排列应该符合用户的使用习惯和心理预期,减少用户操作的负担。

web端设计规范

web端设计规范

web端设计规范Web 端设计规范是一套标准化的设计指南,旨在提供统一的界面风格和设计思路,以保证网站具有一致性、易用性和可访问性。

以下是一些常见的 Web 端设计规范。

一、布局规范1. 页面布局应采用响应式设计,以适应不同屏幕尺寸的设备。

2. 保持一致的网格系统,以提供统一的页面结构和对齐方式。

3. 合理利用页面空白,避免过多的元素和信息拥挤在一起。

二、颜色规范1. 选定一套主题色板,以确保在不同页面中使用同样的颜色。

2. 使用足够的对比度,以确保文字和背景之间有足够的可读性。

3. 谨慎使用饱和度较高的颜色,避免给用户带来视觉疲劳。

三、字体规范1. 选定合适的字体,以确保在不同设备和浏览器上都能正常显示。

2. 控制标题和正文的字号和行距,以保证良好的阅读体验。

3. 考虑字体大小调节的需求,为用户提供调整字体大小的选项。

四、导航规范1. 使用明确的导航栏或菜单,以帮助用户快速找到所需的信息。

2. 添加 breadcrumb(面包屑导航)以提供清晰的页面层级结构。

3. 对于较长的页面,提供返回顶部的快捷方式。

五、交互规范1. 使用一致的交互模式和控件,以减少用户学习成本。

2. 为用户提供明确的反馈,以确保用户了解他们的操作是否成功。

3. 确保网页加载速度快,减少加载时间。

六、表单规范1. 为表单字段添加必要的验证和提示信息,以提高用户填写的准确性和便利性。

2. 使用合适的输入框类型,以匹配字段的数据类型。

3. 对于较长的表单,分步骤显示以减少用户填写的负担。

七、可访问性规范1. 使用语义化的 HTML 标签,以提高屏幕阅读器的可读性。

2. 为所有图像添加替代文本,以确保无障碍用户能够理解图像内容。

3. 提供辅助功能选项,例如调整字体大小或对比度。

八、响应速度规范1. 优化网页加载速度,减少不必要的网络请求。

2. 使用合适的图片格式,以减小文件大小。

3. 使用缓存和压缩技术,以提高页面加载性能。

以上是一些常见的 Web 端设计规范,这些规范能够帮助设计师和开发人员创建用户友好且一致的网站,提高用户体验和使用效率。

web页面设计原则

web页面设计原则

web页面设计原则Web页面设计原则Web页面设计是指在Web平台上进行页面布局和设计的过程。

一个好的Web页面设计能够使用户在浏览和使用网页时获得良好的体验,并能够有效地传达信息。

在设计Web页面时,需要遵循一些基本的原则,以确保页面的可用性和用户友好性。

一、简洁明了一个好的Web页面设计应该简洁明了,不要过于复杂或过于繁琐。

页面布局要清晰,内容要简洁明了,不要过多的文字和图片,避免给用户带来阅读和理解的困扰。

页面的导航菜单要简单明了,方便用户找到自己需要的信息。

二、一致性页面的设计要保持一致性,包括色彩、字体和排版等方面。

整个网站的风格要统一,不同页面之间的设计要保持一致,这样可以让用户更容易理解和使用。

三、易用性一个好的Web页面设计应该具有良好的易用性。

页面的操作要简单明了,用户能够快速找到所需的信息,完成所需的操作。

页面上的交互元素要易于点击或操作,避免给用户带来困扰。

四、快速加载一个好的Web页面设计应该能够快速加载。

页面的图片要尽量压缩,避免过大的文件大小导致加载时间过长。

同时,页面的代码要精简,避免冗余和无效的代码,提高页面的加载速度。

五、响应式设计随着移动设备的普及,一个好的Web页面设计应该具有响应式设计。

页面的布局和内容要能够自适应不同的屏幕尺寸和设备,提供良好的用户体验。

六、可访问性一个好的Web页面设计应该具有良好的可访问性。

页面的设计要考虑到不同用户的需求和能力,包括视力障碍、听力障碍和身体障碍等。

页面上的内容要能够被屏幕阅读器等辅助工具解读,提供无障碍的访问环境。

七、可扩展性一个好的Web页面设计应该具有良好的可扩展性。

页面的结构和布局要能够适应未来的需求和变化,方便后续的维护和更新。

页面的代码要模块化,方便添加或修改功能。

八、品牌一致性一个好的Web页面设计应该与品牌形象保持一致。

页面的色彩和风格要与品牌形象相符,提升品牌的认知度和用户的信任度。

九、考虑SEO优化一个好的Web页面设计应该考虑到SEO优化。

web app设计-Web app的交互性设计

web app设计-Web app的交互性设计

虽然web apps可能会导入其他网站或应用程序的数据,但它们几乎都是自成体系的,它们都能让用户无需导航到其他网站或应用就能够完成他们的任务。根据这个定义,搜索引擎就不是一个应用,因为它会将用户导航到到其他网站以完成他们的任务。
让用户集中于应用
当用户打开一个web app的时候,他们期待这个应用就像是一个单个应用,而不是一系列网页的集合。一个伟大的web app会将自己作为一个独立实体,和网站区分开来,而不是掩埋在网站的导航体验之下。
2.尽可能减少页面数量,让应用尽量集中,不必从一个页面切换到另一个页面,而是从一个视图切换到另一个视图。
3.根据应用的核心场景设计导航,去除典型的web页面导航。你的页面很可能并不需要一个home按钮,或者导航分类菜单,将用户带向站点的不同部分。
4.让基本组件一直可见,这样人们就能很容易将注意力集中在正确的地方。
¨ GOJEE – 手边的个性化食谱。
¨ ASTRID – 帮助个人和团队有效组织和完成日常事务的待办事项清单,并让人们享受其中。
¨ WANDERFLY – 帮助用户根据他们的兴趣和预算发现新应用。
¨ KINDLE CLOUD READER – 随时随地阅读你的Kindl时候尊崇了这些指南,那么你的app就会感觉更快,并且像是一个native app。
本文编译自ling,原文地址。
现代浏览器让开发者能越来越多地利用设备的功能了。例如,web apps可以感知地理位置,提供设备运动方向的运动形式的详细信息,甚至在硬盘上存储数据。将来还会有更多功能,比如对摄像机、麦克风和许多其他组件的访问。
下面是几种你可以利用设备本身功能的方式:
1.在适当的时候,提供给用户地理位置相关的信息,比如附近的饭店或其他场地等。

web的设计原则

web的设计原则

web的设计原则Web的设计原则随着互联网的快速发展,Web设计也变得越来越重要。

好的Web 设计可以提升用户体验,增加网站的可用性和吸引力。

为了实现这些目标,设计师需要遵循一些基本的设计原则。

本文将介绍一些重要的Web设计原则,帮助设计师创建出优秀的Web页面。

一、简约而不简单简约是Web设计的重要原则之一。

简约的设计能够使页面看起来清晰、整洁,同时也能提高页面的加载速度。

但是简约并不意味着简单,设计师需要在保持简约的同时,保证页面的功能完整性和信息的清晰传达。

通过合理的布局和优雅的配色,设计师可以创造出简约而不简单的Web页面。

二、一致性一致性是Web设计的重要原则之一。

在设计网站时,保持页面元素的一致性可以提高用户的学习成本,使用户更容易理解和使用网站。

设计师可以通过统一的导航栏、文字风格和按钮样式等方式来实现页面元素的一致性。

一致性还包括页面的布局和结构,在不同的页面中保持相似的布局和结构可以增加用户的熟悉感,提高用户的使用体验。

三、响应式设计随着移动设备的普及,响应式设计变得越来越重要。

响应式设计可以使网站在不同的设备上都能够良好地显示和使用,提供一致的用户体验。

设计师可以使用流式布局、媒体查询等技术来实现响应式设计,使页面能够根据设备的屏幕大小和分辨率进行自适应调整。

四、可访问性可访问性是Web设计的重要原则之一。

设计师需要确保网站的内容对于所有用户来说都是可访问的,包括残障用户。

设计师可以使用有意义的链接文本、替代文本和标题标签等方式来提高网站的可访问性。

此外,设计师还需要关注网站的加载速度,避免使用过多的图像和动画等元素,以提高网站的可访问性。

五、清晰的导航清晰的导航是Web设计的重要原则之一。

设计师需要确保网站的导航栏清晰易懂,用户可以迅速找到他们需要的信息。

设计师可以使用简洁明了的导航栏样式,并提供清晰的标签和链接,帮助用户快速导航网站。

此外,设计师还可以使用面包屑导航和搜索框等方式来提高网站的导航体验。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Web app设计浅谈HTML5技术的强势发展,为互联网带来的最大改变就是:web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。

Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主。

本文将围绕web app的设计,与大家讨论几点设计技巧。

什么是web app?Web app是一种通过网络(如互联网或内联网)访问的应用程序;也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并依赖于web 浏览器来渲染的应用程序。

Web app的流行归功于网页浏览器的普及,以及使用这一轻薄客户端方便的用户体验。

不必下载安装就可以实现更新和维护,具有支持跨平台的内在属性,是web app 开始流行的关键原因。

典型的web app产品包括web邮箱、web商店、wikis等等。

Web app的优点◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤;◆浏览器应用程序几乎不需要客户端上的磁盘空间;◆新功能从服务器自动传递给用户,用户自己不必升级程序;◆可以轻松整合进入其他服务类web程序;◆跨平台的兼容性现阶段web app还很难有一个设计原则HTML5技术仍在发展中且发展尚不完善,web app作为该技术的产物自然也是在不断试验中进步;此外,web app还要依赖兼容性浏览器更强大的渲染能力,俗话说“皮之不存毛将焉附”,在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。

在这种行业背景下,web app还难以有一个所谓的设计原则,起码现在还不构成总结一个合理设计原则的条件。

其实,所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。

比如,解构主义设计风格的提出不是之前就有的,是理论家在分析总结了建筑设计师盖里、埃森曼、特斯楚米等大师的典型设计作品,结合这几位大师的设计理念后定义的一个流派名称。

所谓的解构主义设计原则也是从权威大师典型作品中归纳总结的;设计原则出现后继而可以对之后的设计起一定的指导作用。

因此本文不谈所谓的web app设计原则,现从已经上线的优秀产品中选择典型设计元素与大家讨论分享,寻找可以借鉴的地方,并借此增进对web app产品设计的认识。

Web app界面设计的8个实用技巧Web app用户界面设计,核心是web设计;不过与一般意义上的web设计相比较,web app 更加注重功能。

为了在与桌面应用程序的竞争中展现其优势,web app需要提供简洁、直观、快速响应的用户界面,以便于用户在任务操作中节省精力和时间。

1.界面元素随需而变力求简洁明了是用户界面设计的重要原则。

在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。

同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。

不过简化界面并非轻而易举,尤其是你不想减少应用程序功能的情况下。

以Kontain搜索模块为例,在搜索框中有一个下拉菜单,帮助用户细化搜索范围。

用户可以通过菜单选择自己想要寻找的内容。

该网站通过这些选项简化了搜索框。

将高级功能隐藏起来是一种有效的简化方法。

搞清楚在界面中用户最经常用的是哪些功能,然后把其他功能隐藏处理。

这些可由下拉式菜单和控件完成。

例如,搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。

当用户需要这些过滤器的时候只需要几次点击就可以使用。

决定哪些功能保留展示哪些需要隐藏起来,并不是一个简单的工作,需要取决于功能控件的重要程度和被使用的频繁程度。

擅长如此处理的还有CollabFinder,如上图。

用户点击搜索链接后并没有被马上带到其他页面;搜索框控件下拉下来,允许用户在当前页面内直接进行搜索操作。

这样的设计方式,既保持了用户视觉焦点的稳定,又使得整个页面在不使用某个特定功能的情况下简洁清爽。

2.为模态窗口增加边缘阴影弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。

阴影一方面增大了菜单或窗口的尺寸,有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。

这个技巧根植于传统桌面程序,帮助用户将注意力集中在弹出的窗口。

由于很多模态窗口不容易从桌面程序内容页面中凸显出来,阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上,于是拉近了模态窗口与用户的距离。

如上图,Digg的登录窗口边缘拥有厚厚的阴影,对下面内容的视觉噪音起到了有效的屏蔽作用。

为实现这样的效果,设计师往往将透明的PNG背景图片作为容器,再把内容填充到容器中,同时等距离填充弹出框各边缘。

或者使用具有透明边框的背景图片,并将内容框绝对定位在其中。

另外,也可以使用基于JavaScript的lightboxes命令或者CSS3中的drop shadows 命令,但需要注意浏览器是否支持。

3.空白状态时告诉用户可以做什么当设计web app的时候,不仅需要关心一般情况下的信息展示,还要确保界面在空白状态时表现良好、具有指引作用。

页面中还没有产生任何信息的时候,可以在空白区域放置一条帮助信息告诉用户如何开始。

例如,一个项目管理的应用程序主页会列出用户的项目,假如还没有什么项目信息,可以为用户提供一个项目创建页面的链接。

即使这个页面上已经存在了这样一个功能按钮,一个额外的帮助并不会有什么妨碍。

如上图,Campaign Monitor在右边方向提供了一个建立新信息的快速入口。

Wufoo的表单页面有醒目的、友好的信息鼓励用户去创建新的表单。

这个技巧可以有效地鼓励用户试用该服务,并在注册后立即进行使用。

通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。

此外,只为用户展示最重要的功能选项也很关键。

一股脑的将众多功能倾泻给用户并没有什么实际意义。

需要牢记的是,用户通常想从应用中获得或多或少的信息,但却不想跳进细节中,用户没有时间也没有兴趣。

在空白状态中激励用户,可以显著地降低用户的流失率,并帮助潜在的用户更好的理解程序系统是如何工作的。

4.Button状态积极反馈许多web app拥有自定义样式的按钮。

默认的输入按钮可能不适合某些情景,文字链接有时候看起来又太含蓄。

需要注意的是,把链接做成Button样式的时候,它们就应该有button 的表现形式。

比如,在点击button的时候它们应该会出现被“压”过的样子。

这不仅仅是纯粹的视觉变化。

及时反馈给用户,可以使web app感觉起来更灵敏,与桌面应用程序的用户体验更接近。

可以使用CSS添加按钮的“pressed”等状态,实现在不同状态下显示不同背景图片的功能。

例如Highrise中的按钮,在鼠标指针点击的时候会呈现“pressed”状态效果,为用户提供了灵敏的反馈感受。

5.使用上下文情境导航在既定的情境下考虑用户希望看什么、需要什么是非常重要的。

不需要在每一个地方都放置相同的导航控件,因为用户不是在任何情况下都需要它们。

上下文情境导航最好的一个例子就是Office 2007中,原先默认的工具栏集合被换成了带状控件形式。

每一项tab控制着一组相关联的功能,如编辑图形、校对或者简单书写。

Web app可以从这种上下文情境导航中获益,仅展示用户需要的、而不是所有可用的功能,从而保持用户界面的整洁清爽。

例如上图中,Lighthouse 有非常典型的tab导航菜单;然而,在tab导航栏的下方它还有二级导航,在这个二级导航中只显示网站活跃部分的相关条目。

6.更加重视关键功能并不是所有的控件都拥有相同的重要性。

例如创建一个新的条目,页面中会有“创建”“取消”两个button. 这里的“创建”就要更加重要些,因为这是大多数情况下用户即将要做的事情。

极少的情况下用户才会去点击取消。

虽然这两个控件并排放置,但是不要给予相同的重视程度。

为了将注意力引导到“创建”上,我们可以尝试使用不用的风格或样式。

一种方式是将“创建”设计成button样式,“取消”设计成文字链接样式。

另一种方式是在视觉上使用使用不同的颜色,并使button略有凸起的效果。

这样便于抓住用户的目光。

例如在Google+创建新圈子的弹窗中,创建按钮在视觉上具备了更加醒目的效果,拥有该页面中更高的重视等级。

7.嵌入视频虽然图片和文字是向用户介绍应用程序功能的很好的方式,但如果资源允许的话,视频将是一个更优方案。

近年来视频在网络上的使用越来越频繁。

Web app的截屏视频经常被使用在营销网站中来展示产品的功能;然而这并不是视频使用的唯一方式。

GoodBarry 在其首页中使用截屏视频来展示产品。

同时它还在应用中嵌入了视频来指导用户如何去开始。

MailChimp在管理面板中使用教程视频以帮助新用户。

一些web app使用内部嵌入的视频帮助用户了解产品的特定功能。

视频是快速演示产品如何使用的绝佳方法,因为与文字相比视频更容易被用户所接受,而且视频可以使用户准确地看到需要做什么,更加清晰。

8.让升级或降级的提示简洁、不扰民在很多互联网产品中都会有不同权限的用户账户存在,比如邮箱、空间、网盘存储、SNS 产品等。

在用户拥有了一个账户后,他们可以对账户进行升级或降级。

如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢?设计师肯定不愿意在应用程序之外完成这件事情,这样的提示应该是和app是无缝连接的,而且最好是让用户感觉方便。

因此升级账户的提示最好放在app内完成。

通过几个例子我们了解一下升级账户的处理方式。

FreshBooks 的升级提示是一直存在的,被放置在了web app的底部。

如上图。

由于提示是在界面的工作区以外的位置,并不会对用户的工作流程造成影响。

在Basecamp的升级提示中,用户可以很清晰地得知升级后将会有哪些变化。

请看上图。

在CompVersions中,各种升级后的变化情况很直观,整个页面简洁清晰。

请见上图。

总结Web app的设计细节远不止上文中提到的这些,本文只算作抱砖引玉,希望大家可以在已有的优秀产品中发现更多思考的触发点。

当我们习惯了走马观花地浏览其他公司产品的时候,我们已经对太多的东西习以为常;当我们开始设计用户界面,开始处理细节的时候,却时常会有拿捏不准的感觉。

如果平时多总结一下其他产品(不一定拘泥于自己的产品圈子)的细节亮点,相信很多东西在实际工作中可以为我所用。

相关文档
最新文档