2024年2月11日发(作者：段亦玉)

界面设计风格说明

1.

.

.

.

.

.

2.

3.

.

.

.

.

.

.

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. 设计说明

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

另外提供一系列为女性设计的粉色主题，粉红色基色和白色面板的搭配，从而突出青春气息、动感活力，在追求可爱时尚中又不失稳重，能更好的满足女性用户的需求。此外手机用户还能通过自定义主题来满足对时尚的追求、彰显个性。

在设计风格上，我们追求简约的风格，以活泼圆润的设计浅显易懂的表达图形界面，使人机互动达到更高的境界。同时加入动感的要素，并结合中国传统文化，加入中国元素。在时尚流行的同时，体现中国传统文化的独特魅力，比较容易被接受和认同。

整个设计简单明快，色调清新高雅，温和的色彩不易造成视觉疲劳，充分体现以人为本的设计理念，更好的顺应的时尚社会的需求。

2024年2月11日发(作者：段亦玉)

界面设计风格说明

1.

.

.

.

.

.

2.

3.

.

.

.

.

.

.

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. 设计说明

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

另外提供一系列为女性设计的粉色主题，粉红色基色和白色面板的搭配，从而突出青春气息、动感活力，在追求可爱时尚中又不失稳重，能更好的满足女性用户的需求。此外手机用户还能通过自定义主题来满足对时尚的追求、彰显个性。

在设计风格上，我们追求简约的风格，以活泼圆润的设计浅显易懂的表达图形界面，使人机互动达到更高的境界。同时加入动感的要素，并结合中国传统文化，加入中国元素。在时尚流行的同时，体现中国传统文化的独特魅力，比较容易被接受和认同。

整个设计简单明快，色调清新高雅，温和的色彩不易造成视觉疲劳，充分体现以人为本的设计理念，更好的顺应的时尚社会的需求。