界面设计风格说明

界面设计风格说明

1.引言 (1)

1.1.编写目的 (1)

1.2.文档范围 (1)

1.3.读者对象 (2)

1.4.参考文献 (2)

1.5.术语与缩写解释 (2)

2.目标人群 (2)

3.界面设计原则 (2)

3.1.界面一致性 (3)

3.2.系统响应时间 (3)

3.3.出错信息和警告 (3)

3.4.一般交互原则 (3)

3.5.信息显示原则 (4)

3.6.视觉设计 (4)

4.设计说明 (4)

1.引言

1.1.编写目的

本文档是对系统界面设计风格进行描述，

1.2.文档范围

本文档是对系统界面设计风格进行描述，

1.3.读者对象

本文档的阅读对象是智能手机系统的设计人员、开发人员、业务规范设计人员、软件测试人员。

1.4.参考文献

1.5.术语与缩写解释

2.目标人群

追求时尚，重视娱乐功能的年轻一族，和高科技从业人员。

3.界面设计原则

坚持图形用户界面设计原则，界面直观、对用户透明：用户接触系统后对界面上对应的功能一目了然。手机系统是用户直接操作和应用的主体，用户界面是手机操作系统的人机交互的窗口，界面设计基于手机的物理特性，根据手机所支持的色彩数量、图像格式，做到最大限度的发挥手机的物理特性。

3.1.界面一致性

为减少用户的记忆负担和界面的美观，在界面中保持界面的一致性，一致性即包括标准的控件，也指相同的信息表示方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

1）界面样式的相对统一，具体界面可结合具体操作的可用性和可实施性，对界面样式进行合理的调整，使区域与区域之间协调统一，主次得当。确保用户可以方便快捷地进行功能操作，减少记忆负担。

2）界面的色彩及风格统一，包括图标、按钮的风格及在不同操作状态下的视觉效果的统一。

3）菜单选择、数据显示以及其它功能使用一致的格式。

4）界面的协调一致。如手机界面按钮排放，肯定、否定摆放位置等。

5）同样功能用同样的图形。

3.2.系统响应时间

系统响应时间应该适中，系统响应时间过长，用户就会感到不安和沮丧，而响应时间过短有时会造成用户加快操作节奏，从而导致错误。因此在系统响应时间上坚持如下原则：

响应时间长度界面设计

0-3 秒显示处理动画

3秒以上显示处理窗口，或显示进度条

一个长时间的处理完成时应给予完成警告信息

3.3.出错信息和警告

有清楚的出错信息和警告提示。误操作后，系统提供有针对性的提示。对出错信息和警告应该遵循以下原则：

1）信息以用户可以理解的术语描述；

2）信息应指出错误可能导致的不良后果，以便用户做出判断或改正；

3）信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁。

4）信息不能带有判断色彩，即任何情况下不能指责用户

3.4.一般交互原则

一般交互遵循以下原则：

1）一致性：菜单选择、数据显示以及其它功能都应使用一致的格式。

2）对于使有耗时的操作都给出反馈

3）确保具有明显后果的操作要求用户进行明确的选择*用户需要完全明确他将要进行危险性操作或破坏性操作。

4）在数据录入上允许取消大多数操作

5）减少在动作间必须记忆的信息数量

6）在对话中提高效率

7）允许用户非恶意错误，系统应保护自己不受致命作物的破坏

8) 方便退出。

9）导航功能。随时转移功能，很容易从一个功能跳到另外一个功能。

10）让用户知道自己当前的位置，使其做出下一步行动的决定。

11）避免水平滚动条与垂直滚动条不同，水平滚动条并不受欢迎，因为它会使项目阅读起来比较困难。

3.5.信息显示原则

信息显示遵循以下原则：

1）只显示与当前用户语境环境有关的信息；

2）提供适当的默认值提供提供适当的默认值来减少用户不必要的操作，从而帮助用户完成工作。

3）使用一致的标记、标准缩写和可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；

4）产生有意义的出错信息；

5）使用缩进和文本来辅助理解；

6）使用窗口分隔控件分隔不同类型的信息；

3.6.视觉设计

1）允许用户定制界面。用户可以根据自己的需要来改变默认的系统设置，选择一种自己满意的个性化设置，达到软件产品与用户之间的协调性。

2）实时帮助设施。通过实时帮助设施可以帮助用户熟悉系统、缩短获得帮助的时间，增加界面的友好性。进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助。表示帮助时采用提示文本，同时帮助提示文本不影响正常交互方式，触笔移出相应功能区即自动关闭帮助文本。

3）提供视觉线索，用图形符号帮助用户记忆。如用图标表示、下拉菜单列表中的选择4）使用真实世界的比喻。如：电话、地址簿的图标设计，尊重用户以往的使用经验，不要让用户去猜。

5）界面色彩，使用邻近色或同类色进行色彩构成，采用色彩的弱对比，整体色调对比不要太强，近似的颜色表示近似的意思。

4.设计说明

做为一款功能实用型的手机，我们在界面配色的选择上,以蓝色做为主色调。蓝色体现着理性，带有科技感和时尚感，给人一种清爽、现代的感觉，让人一看就能体会到舒适与成功。以深灰蓝色作为基础色，结合渐变效果，稳重中不失变化。搭配以浅天蓝色，亮丽清新，形成反差的同时又做到了统一。辅以白色，与各类冷暖色调和谐搭配，清晰显示文字信息。与基础色相呼应，这样类自然天空的色彩搭配，做到整个屏幕的完美与统一。简洁明快的设计理念，体现一种科技时尚与自然的和谐之美，必然会受到时尚青年和高科技从业人员的喜爱。