相对应的硬件——AUPALLA 手环

-卷首

能用图说清楚的

我尽量少些文字

依然为大家写一些干货

通过解剖一款自己设计的 APP

跟大家聊聊 UI 设计实际项目如何着手

设计流程讲解

及相关的种种

另外

一些朋友说我每次推的内容都太“干”

想想也确实

所以

我决定

继续“干”下去

产品所有权:深圳市大火星科技有限公司

软件开发方:广州龙曜电子科技有限公司

版权所有,未经同意禁止转载、拷贝

保留一切权利!

此文的主角 “AUPALLA” APP

相对应的硬件——AUPALLA 手环


=====

OK,开始正题!APP UI 设计过程解剖给你看~

关于 UI 设计流程,我之前推过一篇《聊聊我的 UI
设计流程》,没看过的朋友可以看一下,不过不急,今天这篇更详实。

本次案例 APP 名为“AUPALLA”,为智能手环配套 APP,iOS
版与安卓版均已上线(此上线版本为1.0版,2.0版在开发中,将会有大变化)产品市场以欧美为主,所以
UI 设计用英文排印。当然,APP
也做了本地化,如果您的手机系统语言为中文,那您将会看到中文界面。

篇幅所限,以下流程为粗略介绍,实际项目流程中出现的环节要复杂、繁琐的多……这里不一一呈现(没有必要)文章撇除设计流程上的细枝末节,把最重要的环节呈现给大家,希望大家有所收获,也期待大家与我交流设计(关注本号并留言,我会与你们取得联系)

不足之处欢迎交流、斧正

谢谢!~

1

项目走起~

第一步当然是接到甲方的开发需求,需求的形式可能是正式的需求文档也可能是口头描述等。

在需求里,甲方会描述 APP
的开发目的、功能、市场、风格需求、竞品信息等等……内容可多可少,完全看甲方。

本产品的开发需求(商业原因,图片模糊处理)

基本能看到是一些文档。对设计师来说,第一步工作是阅读这些文档,这个活并不轻松,因为甲方所处的行业可能是你完全没接触过的,很多专业知识你并不清楚,此阶段设计师会经历各种查资料、沟通,努力去理解整个软件的信息构架、功能、定位等等。

n 天以后……

此时设计师大概要把文档里的白纸黑字转化为视觉语言,在此过程中“页面”的概念出现,页面之间的信息构架、页面中的信息编排、功能翻译成视觉、用户操作流程……等等都开始考虑,此时交互设计已然开始了。

2

n 天以后……

产出物如下(商业原因,图片模糊处理)

线框图就是这个了(其实之前也手绘了一些线框,一时找不到了……😓)APP
的信息构架在这个阶段基本出来了,页面的布局也已经成型,也就是说此时我已经把抽象的开发需求变成具象的图形语言了(此过程相当费脑子,谁做谁知道……)

线框图是一定不能省略的设计流程,原因在之前的文章里说过了,不再赘述。完成线框之后,自己多检查检查(逻辑……)没问题了,就和甲方提案。

3

n 天后,线框图经过来回沟通、修改,定稿后,下面就要设计高保真界面了。

工作状态……

APP 主界面

运动模块首页

运动模块(跑步功能)界面

目标设置界面

步数记录界面

设备设置界面

个人信息页面

设计工具

AUPALLA
功能多,界面自然也多,不一一放上来了,有兴趣进一步了解的小伙伴可以去 App
Store 或谷歌商店下载(搜索:AUPALLA)

高保真界面设计全面考验设计师的视觉设计能力,若要展开来说可能够写好几本书了……把这些能力分门别类的话,大概有以下几点:

– 字体排印(Typography)

– 版式(Layout)

– 色彩(Color)

– 信息设计(Information Design)

– 图标设计(ICON)

– 图像采集及处理(Image)

– 品牌(Brand)

– 动效

– 设计规范(iOS、Android)

– 软件操作(Software)

……

诚然,UI
设计涵盖众多学科,但回到视觉设计本身层面来说,起关键作用的依旧是视觉传达设计基础(以上几点)很难想象排版、信息设计、字体排印、色彩、图形都不过关的情况下能做出好设计。所以,设计原理、设计基础技能是非常重要的,把基本功练扎实了做设计才有底气,就算以后换其它媒介设计也不用担心,万变不离其宗。(这是我最想强调的)

4

界面部分设计完结,接下来要和开发工程师(程序员)对接,进入软件开发流程,这时候我主要做以下几件事情:

– 切图

– 规范标注

– 配合开发

部分切图(九牛一毛)

关于字体排印的规范

控件的定位、色彩、尺寸规范

这样的切图和规范还有很多,这是十分必要的。详细的设计规范是保证 UI
开发还原度的保障。另一个保障是……和程序员搞好关系,端个茶倒个水、买些东西给他们吃、融洽地聊聊天、一起抽抽烟之类的……这样他们可能会接受你的吹毛求疵(没办法,设计师的工作就是在细节中,尽量保证完美吧)

5

这个时候 UI
设计师大部分的工作已经做完,下面是积极配合程序员开发。应对出现的各种问题,这个阶段并没有固定的工作内容,基本上是定期在真机上检查
UI
的实现情况,碰到问题解决问题。这个过程会一直伴随程序员开发进程,直到软件开发结束,很漫长的过程。

6

从功能、设计再到软件测试全部完成后,就要着手准备 APP
上线了,上线前我需要做的工作如下:

– 应用商店详情页设计

– APP ICON 资源一套

– 最后检查(Pre-flight)

App Store 详情页设计

7

开发人员提交 APP
上线审核,顺利通过审核的话几个工作日后就可以在应用商店下载到 APP
了;审核若不通过,需要针对应用商店意见优化后再提交,这里面偶尔会有需要
UI 设计师配合的地方。

注:苹果对 UI
设计有一定要求,若涉嫌严重抄袭或不符合苹果交互规范再或者界面设计非常低劣,是不能通过审核的。不过,我从来没遇到这个情况,自豪下😊

以上便是我本次项目的大体设计流程,UI 和 UX
是一并做起的,虽然是两个领域,但估计像我这样“双肩挑”的设计师也不在少数吧?

用图形表述流程大概是这样的:

在学校教《UI设计》的时候我也是按照这个流程来安排内容的,让学生在有限的课时内把
UI
设计流程完整走一遍,使他们更多地了解每一个阶段的前导后续,我认为这个很重要。

以上都是个人经验之谈,比较适合自己而已,它一定不是标准答案,也肯定没有标准答案。希望能给大家提供一些参考,若文章对你有用,烦请转发、收藏。

欢迎交流、斧正。

最后

认真地、诚恳地通知各位朋友

本人将于今年 9 月份(2017-9)开设“UI 设计实战训练营”

课程为期 3 个月,线下授课,小班教学。

教学案例将全部采用我个人的商业 UI 设计案例*(均已上线,投入使用)

详细课程内容安排及报名方式,近期会在本公众号公布,敬请关注。

感谢!

*案例包括移动端、PC端、可穿戴设备及其他智能设备。