网页ui设计原则

网页ui 设计原则

清晰度是界面设计中，第一步也是最重要的工作，要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它，让用户知道为什么会使用它。下面介绍网页ui设计原则，希望对您有帮助。

网页ui设计原则

1.明确你的用户群

首先要明确一个方向：谁是你的用户群?不同阶层、不同年龄的用户偏重的主题设定和设计元素都不相同，所以UI设计必须是有针对性地设计。

2.界面要清晰

清晰度是界面设计中，第一步也是最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它，让用户知道为什么会使用它。当用户使用时，要能够预料到发生什么，并成功的与之交互，只有清晰的界面能够吸引用户不断地重复使用。

3.交互性

界面的存在，促进了用户和我们的世界之间的互动。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

4.保持用户的注意力

在进行界面设计的时候，能够吸引用户的注意力是很关键的，所以千万不要将你应用的周围设计得乱七八糟分散人的注意力，谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告，那么请在用户阅读完毕之后再显示。尊重用户的注意力，不仅让用户更快乐，而且你的广告效果也会更佳。因此要想设计好的界面，保持用户的注意力是先决条件。

5.让用户掌控界面

人都喜欢对事物完全掌控，而不考虑用户感受的软件往往不会给客户掌控的感觉，迫使用户不得不进入计划外的交互，这会让用户很不舒服。保证界面处在用户的掌控之中，让用户自己决定系统状态，稍加引导，这样会更容易达成目标。

6.每个屏幕需要一个主题

我们设计的每一个画面都应该有单一的主题，这样不仅能够让用户使用到它真正的价值，也使得上手容易，使用起来也更方便，在必要的时候更容易进行修改。如果一个屏幕支持两个或两个以上的主题，整个界面看起来会混乱不堪。正如文章应该有一个单一的主题以及强有力的论点，我们的界面设计也应该如此，这也是界面存在的理由。

7.区分动作主次

每个屏幕包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主!文章的存在是为了让人们去阅读它，所以在设计界面的时候，尽量减弱次要动作的视觉冲击力，或者在主要动作完成之后再显示出来。

8.自然过渡

界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

9.符合用户期望

人总是对符合期望的行为最感舒适,这也是与人打交道的设计应该做到的。在实践中，这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生，如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。

10.强烈的视觉层次感

如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。也就是说，如果用户每次都按照相同的顺序浏览同样的东西，视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，最终只会让用户感到一团糟。在不断变更设计的情况下，很难保持明确的层次关系，因为所有的元素层次关系都是相对的：如果所有的元素都突出显示，最后就相当于没有重点可言。如果要添加一个需要特别突出的元素，为了再次实现明确的视觉层级，设计师可能需要重新考虑每一个元素的视觉重量。虽然多数人不会察觉到视觉层次，但这是增强设计的最简单的方法。

11.减轻用户的认知压力

恰当地处理视觉元素能够化繁为简，帮助他人更加快速简单地理解你的表达。用方位和方向上的组织可以自然地表现元素间的关系。恰如其分地组织内容可以减轻用户的认知负担，他们不必再琢磨元素间的关系，因为你已经表现出来了。不要迫使用户做出分辨，而是设计者用组织表现出来。

12.色彩不能决定一切

物体的色彩会随光线改变而改变。艳阳高照与夕阳西沉时，我们看到的景物会有很大反差。换句话说，色彩很容易被环境改变，因此，设计的时候不要将色彩视为决定性因素。色彩可以醒目，作为引导，但不应该是做区别的唯一元素。在长篇阅读或者长时间面对电脑屏幕的情况下，除了要强调的内容，应采用相对暗淡或柔和的背景色。当然，视读者而定，也可采用明亮的背景色。

13.恰当的展现

每个屏幕只展现必需的内容。如果用户需要作出决定，则展现足够的信息供其选择，他们会到在下一屏找到所需细节。避免过度阐释或把所有一次展现，如果可能，将选择放在下一屏以有步骤地展示信息。这会使你的界面交互更加清晰。

14.“帮助”选项

在理想的用户界面，“帮助”选项是不必要出现的，因为用户界面能够有效地指引用户学习。类似“下一步”实际上就是在上下文情境中内嵌的“帮助”，并且只在用户需要的时候出现在适当的位置，其他时候都是隐藏的。设计者的任务是应该确保用户知道如何使用你提供的界面，让用户在界面中得到指导并学习。

15.引导状态

用户对一个界面的首次体验是非常重要的，而这常常被设计师忽略。为了更好的帮助用户快速适应我们的设计，设计应该处于零状态，也就是什么都没有发生的状态。但这个状态不是一块空白的画布，它应该能够为用户提供方向和指导，以此来帮助用户快速适应设计。在初始状态下的互动过程中会存在一些摩擦，一旦用户了解了各种规则，那将会有很高的机会获得成功。

16.解决看得到的问题

人们总是寻求各种方案去解决已经存在的问题，而不是潜在的或者未来的问题。所以，不要为假设的问题设计界面，我们应该观察现有的行为和设计，解决现存的问题。这确实不是件能够让人兴奋的事情，但却是最有价值的事情，因为一旦你的用户界面愈加完善，会有更多的用户愿意使用你的界面。

17.多涉猎设计之外的知识

视觉、平面设计、排版、文案、信息结构以及可视化，所有的这些知识领域都应该是界面设计应该包含的内容，设计师对这些知识都应该有所涉猎或者比较专长，要从中获取许多值得学习的东西，以此来提高你的工作能力。

18.实用性

在设计领域，界面设计成功的要素就是有用户使用它。虽然精美但用户不会选择使用的设计作品，也就是失败的作品。因此，界面设计不仅仅是设计一个使用环境，还需要是创造一个值得使用的艺术品，它仅仅能够满足其设计者的虚荣心是不够的，首先它必须要实用!

19.检查错误

要尽可能检查和清除程序中的错误和BUG，即便精心地设计了弹窗来做说明。为了更好的用户体验，不要出现让用户惊讶的结果。Beta测试是消减错误的最好方法。

20.简约设计

简约设计不仅仅是一种流行趋势，从用户体验上看，简约的界面可以去掉很多无关的干扰信息，使UI更具易用性。好的UI设计应该具备强大的功能，但是画面要简约，拥挤的界面，不论功能多么强大，都会给用户带来不适感。

不可不知的网站设计原则

一系统性原则

设计实施人员需要在充分了解需要建立网站的相关企业或者机构组织的文化、管理信息等基本情况，将营销目标、行业竞争状况、产品特征、用户需求行为以及网站推广运营维等基本问题要素融入到网站建设方案中，为用户提供完整的信息和服务，做到网站的基本要素合理、完整，主题鲜明、要点明确;网站的内容全面、有效;网站的服务和功能适用、方便;网站建设与网站运营维护衔接并提供支持。

二适应性原则

适应性的原则主要涉及两个方面，一个是网页自适应另一个则是整站适应。

1.自适应网页设计也称为响应性的Web设计，现在的网站基本要求三合一、四合一，也就是电脑、手机、PAD等多端口同时适用，即"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。“自适应网页设计”的概念早在2010年就由Ethan Marcotte提出了，现在这个原则普遍适用于网站建设中，很多建站公司采用的模板都是属于这种自适应的网站设计，比如说领动、Meetsite(见站)。

2.整站适应指网站的功能、内容、服务和表现形式等需要适应不断变化的网络营销环境，网站应具有连续性和可扩展性，这样才能保证网站的生命力。

三可用性原则

网站设计绝不可忽视的原则就是用户体验原则，遵循用户至上，为用户打造完美体验。这要求网站具有可用性，需要打造非凡的交互体验，让用户方便、快速地找到自己需要的服务，并用最简单的操作方法来完成操作;另外要注重细节，细节就是您的用户会反复留意的东西，比如友好的界面、清晰的导航、完善的帮助系统、合理的信息架构、出色的视觉设计、优良的网站性能等。

1.一致性的视觉设计，达到“一致”的界面，并非指界面元素需要“统一”，视觉上可以有很多不同的表现手段，具体体现在形状、色彩、界面质感、图标、画风、文字描述、提示信息呈现方式等，使得网站在不同的栏目下，设计一致，而不是不同的栏目下页面视觉差异大。

2.友好的界面：界面设计的原则很多来自于经验和启发，并在不断的探索讨论过程中，建立与用户之间的信任感，不断进行易用性测试。其易用性原则包括：简洁连贯、提供信息反馈、允许简单的撤销操作、降低短期记忆载荷和学习成本、及时测试、信息架构合理。

3.文本排版在网页设计中是相当重要的一部分。CSS3 的@font-face 使得页面可以嵌用自定义字体，页面文字显示将更丰富多彩，表现力更强。实现优雅的文本排版，我们需要注意以下：文本大小、行距、留白、Line-height 属性值。

4.清晰的导航，通常包括：全局导航、本地导航、上下文导航、面包屑导航，在设计中我们可以综合考虑使用。

5.搜索更容易：多数用户青睐不需要思考就知道该如何搜索的界面。针对搜索功能最常见的设计就是一个相对显得宽大的输入框，加上“搜索”按钮组成，以提供最为方便的快捷搜索。另外虽然我们有时必需提供高级搜索功能，但较好的用户体验是，即使用户没有提供额外信息的情况下，搜索功能也应该是正常能够工作的。

6.注册表单尽量简洁，没有人喜欢填表单，设计高效的网页表单的原则是，尽量使用较少量强制性的输入框，避免增加用户负担。不应在注册页面上放置广告，闪烁图片等效果分散用户注意力。

四简单性原则

在设计网站的的时候，把重点放在其主要功能上，并保持它的简洁，使用户能够更好地理解。使内容生动地显示出来，最好的设计是你感受到的，而不是理论上你支持的。为此在保证网站基本要素完整的前提下，尽可能减少不相关的内容、图片和多媒体文件等，使得用户以尽可能少的点击次数和尽可能短的时间获得需要的信息和服务。设计只是一种烘托手段，主要强调的是产品和服务，不宜喧宾夺主，不要太过花哨，无论网站做的有多漂亮精致，简洁大方是必须的，张扬是不可行的，要为网站的亲和力留出一席之地，让网站和人达成和谐。

五创新性原则

优秀的设计应该是创新的，成功的网页设计不照抄传统设计，也不只是在平庸的页面基础之上创造一些设计演变，创新的网页设计，亮点必须贯穿始末，对产品的体现要在品质上面进行全面烘托，使产品有个面目全新的 “华丽出场”，在这一点上，绝不能让设计之火熄灭，让灵感之火燃尽。好在各种页面设计元素层出不穷，为网页设计本身提供大量变换素材和完美的可能性。下面给大家介绍两个基本点：

1.在UI和图片设计方面，应该用创新的心态和批判性的思维对待每一个项目，并试图开阔自己的思维，发掘其它的分支。把创造力作为创新工具，来脱颖而出。

2.多和身边的新人保持交流，不管是图片生成工具还是新的编程语言，多接触这些内容。

除了上述五项原则之外，当然优质的网站设计还得遵循富有美感、使产品实用、更简单易懂、平衡协调性等原则，当然，也可以在这些的基础上有所创新升级，把握大局、注重细节，做有品质的网站。

网页设计中交互设计的流行趋势

交互用在人和界面之间的浏览、点击、切换使之方便、快捷、平滑，好的交互是使用户依赖，能使产品长久留住用户。视觉则是人的眼睛看起来舒服、舒适，让用户惊喜，让用户愿意去尝试。网页则是一个产品类型，同时需要用到交互和视觉来是此产品更好地宣传需要展示的内容的载体。成为交互的话需要把握产品受众人群的心理，了解产品的特性，以及要有新颖的创新思想，能想到让人一亮的让人用起来更舒服的点子。

交互设计与视觉设计他们本身可为是相互相成的关系。不同的地方是各自的侧重点不同。交互侧重与人的心理认知过程和各方面的习惯及心理感受。视觉设计侧重与页面的美感，视觉效果。这就需要一个优秀的网页设计。

一、响应式设计日益成熟

就在几年前，提起“响应式网站”，还意味着它的适配平台仅限于桌面，平板和智能手机等客户端。随着智能手表，智能电视和其他智能家用设备的迅猛增长，响应式设计的定义也得到了极大的扩展。

很多大公司近几年着重推进响应设计的研发进程。如google前些时间推出的moto 360，以及苹果推出的iwatch，三星、LG、华为都推出了自家的智能手表。这标志着未来在智能可穿戴设备将超过手机发展势头，随之而来的就是全面革新的响应式设计闯入生活，未来的生活方式将更加有趣。

二、幽灵按钮

幽灵按钮就是隐藏形式的按钮，不破坏整体的画面感，保持了画面简洁，统一，但又不失功能性。可以说是未来在流行简约、背景大图的一大必然趋势。

三、更强调字体

出现这一趋势主要有两个方面。首先传统的一些Web字体价格昂贵，意味着网站排版需要更多的预算。如今，这种情况在改变，设计师只要更少的预算甚至免费的字体就能在网页上自由设计。另外，在流行的简约风格下，背景基本都是缺少故意装饰的图案，部分网页只有背景和文字，有时会缺乏整体的设计感，所以更大的标题文字能使画面更具冲击力，主次分明，使人印象深刻的同时又不使画面显得凌乱。

四、滚动主导点击

移动互联的不断发展，刷新了移动终端的使用频率，人们越是依赖手机等设备就是越是促进移动交互的设计，所以，更加方便的滚动逐渐主导点击，成为移动交互的新宠儿。

五、卡片式设计继续

随着信息处理能力的增强，部分以堆加信息的设计逻辑依然能存活。这里就有典型例子，卡片式设计。不同于其它走简约的信息分类，它直接醒目的将各个内容图片铺开放在一起，这样做的好处是，用户筛选信息快速、方便，不用进入下一级就可以基本全部了解信息。例如，微博和视觉中国的图文信息排版。