界面设计规范与原则在线视频

虽然我们之前的课程

都没有过分强调

产品是基于什么平台开发

但现实的设计确实是有平台之分

设计师要考虑是web端产品还是移动端产品

移动端是ios产品还是安卓产品

又或者是windows phone产品

平台之间并没有统一的规范

因此

我们要考虑到平台的规范性

同时权衡各平台之间的开发问题

这两个页面来自我们移动终端市场

份额最大的两个系统

ios系统和Android系统

鉴于2017年Windows phone的市占率逐步下降

现已经不足1％

实际开发也很少受到制约

因此

我们主要以安卓和ios两大阵营的规范

来为大家讲解移动端规范的内容

首先

项目组应该根据成本

确定开发一个端还是多个终端的产品

如果是一个端是选择ios平台开发

还是Android平台开发

又或者是多平台采用统一的设计方案

然后做分别的开发

除了成本的考虑

还要有时间上的考虑

允不允许开发多套不同的设计方案

我们建议

初次上市的产品

如果没有经过大规模的用户验证

最好只开发一个终端

或者说设计一套方案适配多个终端

而产品的升级则可以选择针对终端进行开发

在这里

我们以第二章动物园导览APP为例进行讲解

当时在开发这套系统的时候属于创新研发

所以有足够的时间和精力去摸索不同平台的设计

当然

由于动物园导览是移动端的导览

所以整个设计也不涉足web的开发

因此

项目组最后是针对ios系统和andriod系统

进行分别的设计

最后得到了安卓版和ios版的效果

最后开发上线的是安卓版

那么

动物园导览系统在设计时

要遵循一定的设计原则

总的原则是要满足于用户体验的需要

将界面置于用户的控制之下

满足用户完成任务的需求

能够表达出功能的含义

让用户快速的理解界面内容和功能

其次

减少用户的记忆负担

减少用户的记忆负担的核心有两个

界面简单和设计逻辑清晰

界面简单是指

元素和内容的清晰直观的表达效果

设计逻辑清晰

是指界面的元素的位置放置是有逻辑性的

常规逻辑是用来保证用户可理解

而不是随意的

其实这里追求的是

界面能够引导用户的视觉流

跟随着设计逻辑

与界面角色和功能相关的设计逻辑进行

不同的平台也有自己的UI开发原则

动物园导览系统开发是基于ios10

面向iphone手机的开发

以及Android7.0大版本进行的开发

ios系统的UI设计原则要遵循界面美观

在符合用户认知的基础上

外观与其功能完美的结合

一致性

是指界面在设计上沿用用户以往的知识和技能

不仅要符合界面的设计标准

同一图标应代表同一种含义

直接控制

是指用户可以直接操控界面上的物体

而非通过控件

这里说反馈

是指告知用户操作行为后的结果

暗喻是指通过丰富的动作和图片

使用户在操作现实世界的物体一样

而安卓系统的UI设计要遵循

漂亮美观的界面

通过合理到位的运用声音和动画

直接触控操作对象

展示个性化和趣味性的设计

遵循用户的使用习惯四点来保证界面富有美感

简单的操作方式是运用短句避免长句

善用图片语言

协助用户做选择

让用户知道自己的位置及清晰的反馈

操作流程标准化

不要轻易打断用户

除非非常重要

完善的工作流程

运用通用的视觉样式和操作方式

鼓励并帮助用户完成任务

由于界面设计是对状态栏

标题栏 标签栏等的设计

因此我们对两个平台的视觉规范

进行了对比分析

进行了对比分析

首先是状态栏

Android和iPhone的状态栏均在屏幕顶端

遵循人从上到下的一个视觉流程

Android的状态栏左侧会实时提醒有新的通知

通过向下滑动便可打开通知详情

iPhone的状态栏仅显示活动状态和正在运行的进程

却不能对状态栏有任何操作

标题栏来看

Android界面标题栏无法操作

更为纯粹

但iPhone的标题栏有后退的导航显示

其次是标签栏

Android的标签栏位于界面标题之下

处于屏幕的上方

可以很直观的看到

而iPhone的标签栏是处于屏幕下方

这样更容易按到

标签栏一般最多控制在5项以内

多出的选择可以以显示更多的方式展开

另外

Android的工具栏通常居于屏幕的下方

通常保证少于等于3个按钮

但iPhone的工具栏和标签栏都在屏幕下方

且不能同时存在

此外在ios和Android的官方

还可以找到UI人机界面设计指南

指南中包含了所有人机交互设计的细则

包括界面设计尺寸 手势 触摸等交互细则

但是随着技术的进步

屏幕尺寸等硬件会发生改变

因此人机交互规范不会一成不变

可以去开发者论坛寻找最新的规范

辛曼在《移动互联：用户体验设计指南》

对手指触面大小做出概括

手指垫触面的平均大小为10到14mm

手指尖触面的平均大小为8到10mm

适合的手指触摸大小为10mm

同时

《Iphone 人机界面设计指南》

苹果公司建议的是

苹果公司建议的是

最小触摸面为44乘44

大约为8mm

在《Windows 手机UI设计和交互指南》

微软建议最佳触摸大小为9mm或34px

最小的触摸目标应大于7mm

所以我们认为人手触摸面积估值为10mm

增大触摸面积有利于提高用户的体验性

人的眼睛通常遵从从左到右

从上到下的一个视觉流程

好的视觉流程让用户更快

更有效的完成阅读和浏览

能避免视觉噪声和杂乱无章

接下来

则是针对不同的平台进行设计

这里我们看到的是安卓端的界面设计

主页使用了标签式的导航

其余的设计包括标题栏

地图显示区域 导航区 下端工具栏四部分

标题栏显示

隐藏导航按钮 页面名称 用户登录和拍照

点击隐藏导航按钮

一 展开隐藏导航菜单

二 采用向右滑动的抽屉式导航

二 采用向右滑动的抽屉式导航

可以增加页面的生动和趣味性

导航区主要有园区简介

景点游玩等8项主要功能

采用左右滑动的形式

充分的利用页面延伸的空间

点击拍照按钮可以进入硬件照相机

保证用户在使用导览的任何环节都可以拍照留念

在ios端

我们采用了完全不同的导航方式

舵式导航和标签式导航结合的复合导航

同时在主页面只展示功能入口

放弃信息展示

虽然都体现了工具APP的一个特点

但是两种平台上的设计指导就有很大区别

由于时间关系和人力关系

项目组最后只能将所有的精力放置在安卓端的设计

再进行ios端的开发

所以经过多次的修改和调整

我们看到的是安卓版上线前的APP界面设计

我们还是采用之前就选择的宫格式导航

此外应园方的要求

更偏重于游览和故事叙述式的体验

更加明确地为了吸引更多的儿童用户

因此没有在许多页面去掉了工具栏和标签

直接以宫格式导航将功能折叠

在后续的开发过程中

我们也可以看到

虽然平台给了很多规范

但是用户的使用体验才是第一位的

规范有时候不得不为用户的实际体验和习惯让步

但是建议大家在设计中

如果规范与用户体验之间没有太大的冲突

尽量不多使用系统原有的控件和工具

这样才能减少开发的难度

从上面这个案例我们也可以看到

界面设计有一个总的原则

每个不同的平台又有自己的原则

一般情况下

这两种是兼容的

此外

根据实际情况确定是针对何种平台进行开发

按照现有的技术条件

平台之间是有壁垒的

有时候会因为项目的时间 人力

或者是成本控制而针对更少的平台进行开发

在这个案例中

由于实际需要而先开发安卓端产品

建议大家在产品的市场前景还不是很明朗

没有明确的用户反馈时

选择单一的平台集中精力开发

如果不是用户使用习惯的问题

我们尽量不改变平台的开发控件的使用规范

这些控件的改变容易造成技术人员的困扰

当然

上面这个只是开发案例

如果是升级或者是多平台的适配

又要注意跨平台的一个兼容性问题

和体验的一致的问题