超信1.2版本阶段总结

超信1.2版本阶段总结

超信的开发时间已经超过了6个月，从开始的构思到现在整个项目的完善经历了很多，虽然现在并没有大面积的开始进行推广，但是作为一个开发团队的一员，学习到良多也收获到很多帮助。自己学过产品做过demo为了设计加班许久，从产品的最初构思到现在我也从一个懵懂的尝试者成为了一个有想法有理想的人（哈哈）。由于我真的是一个人负责所有平台，所以过程很长。

写在前面的话：

我肯定会有人抨击界面很丑，设计的不好之类的话，但是我认为好的设计是不单单视觉的美观，最主要的是功能性、用户体验、实用性、易用性、逻辑性、严谨性所有的结合起来才是好的设计（比如微信，也许很多人觉得这最好都重新设计，但是它的用户界面确是60+的人都可以很顺畅的用和体验的）。如果设计师只按照自己的审美不考虑任何因素，那你可能会用比较大的间距，小的字体来营造氛围，酷炫的交互效果来体现自己的价值，但是这只能是个表现自我的方式，一个产品就是一个team，甚至将来要面向大众，那你的行为不只是为了展示自我，甚至还有为的是所有使用它的人和制作它的人提供一个舒适的视觉环境，也许一个好的界面可以吸引你一时，但是如果每次翻页都要2秒以上甚至列表酷炫到排版很长，完全不符合你的app需求，那再美观的设计，也并不是一个好设计。

例：一个app的水果卖的特别便宜，买一送三，价廉物美，打开app后真的很丑。字大图丑，但是不影响你的购买和送货上门。于是你会在开始的时候吐槽一句真丑，然后控制不住的继续购买，因为没有比它更价廉物美的商家了，所以一个产品的好坏，功能和用户需求是第一位，设计只能算是锦上添花，并不能雪中送炭。

对比一下：一个社交app，用你完全没体验过的交互手势，界面酷炫屌炸天，在此举例wire，打开后让我眼前一亮，但是在一段时间的使用后，我会感觉及其不好使用，界面大量的留白减少了消息的阅读，酷炫的交互手势，打乱了我本身的用户习惯，观赏它的一段时间后 我就卸载了。

综上所述：这两个都是极端案例，那么一个好的设计应该是在好的功能上，有着舒适严谨规范并且细致的感官感受和舒适的手势交互才是一个好的设计。（如果你要亮瞎眼的设计，一般商业工作中不会出现，你要表现个人的设计能力可以做一些概念设计来体现个人的价值。）

一，行业分析

即时通讯应用－人们生活的必备工具

1 全球排名前10的应用，有6个是即时通讯应用。

2 以用户和会话数量来看，排名前列的全部是即时通讯应用。

 

即时通讯应用的优势

1 异步但又实时

2 表达能力强

3 互动能力强

4 更安全

5 可以重放

6 便于全球访问

即时通讯应用的机遇

1 不同圈子，用户期待不同的即时通讯应用，熟人圈，陌生人，生意朋友等等

2 中国大家只用一些知名社交软件，国外很多人都用不一样的社交软件。

互联网对于现有社交app的评价

许多人对于日渐复杂的社交app表示越来越不如以前轻便，出现了在网络上一些论坛和视频中开始吐槽抱怨。

二，项目的启动

1，项目介绍：

超信是一款社交app，但是主要突出的是轻便快捷，是一款轻应用，主要应用于熟人之间的社交，抛开附加的越来越复杂的社交软件，将轻便快捷的社交进行到底，专注聊天体验，更快捷、更流畅。

2，竞品分析：

以上为全球排名前6的社交app。

对于中国常用的社交app为：微信、QQ、陌陌

在此我就不截图了，因为大家平时都在使用，总结为现在的app都是设计的中规中矩，这跟社交类的app由于需要展示很多聊天窗口和信息有关，随意更改大布局会给用户带来并不是习惯的用户体验，甚至会由于重新建立交互体验导致粘性不足。

在设计上想要体现的是规范、细致和细节上的亮点，并且大繁至简，在简单舒适的环境下增加用户的使用时间。

3，用户定位：

 产品定位为熟人之间的社交，并且是偏向于工作中的白领，可以不用担心老板或者不想别人知道你的个人生活的一些商务朋友去看你的朋友圈，安心的交流和使用。

目标是可以工作中有一个不会让你分心于别的功能的社交app，专注于信息传递。

唐.诺曼说过，如果在用户界面设计和人机交互领域中有任何神圣的原则，那必然是“了解你的用户”。

最后我们得出的特点是：

1 阅读容易，长时间使用眼睛舒适（高饱和度的丰富色彩会让眼睛产生匹配）

2  追求高速，流畅的聊天速度

3   渴望多平台同步方便使用

4  安全性要求更高，希望隐私安全

综上所述：

三：设计部门工作

（以下为部分功能举例，工作内容很多，总结理念和思考方法，不教设计传统知识 ）

色彩定位：

色彩对于人心理的暗示是比较明显的，红色给人感觉热情积极以及紧张感，任何的色彩都有利弊，因此需要选择符合用户群体嗜好并且弊端不会影响主要功能的色彩。

根据用户群体：20－40岁白领

需求：简约舒适安全

我们得出2个颜色比较适合，为蓝色和绿色

由于绿色和蓝色为让人感觉安全和舒适的颜色，经过商议，决定还是使用和微信主题色有比较明显的区别的蓝色。

色彩规范：

由于希望设计出一个严谨细致的设计，所以不会出现色彩不统一，或者自己都糊里糊涂的状态，增加自己和程序员的工作，以及对于最后的交接有很大影响的情况，所以色彩规范是要在第一版确认后就需要完成的东西，不但方便自己也方便了程序员造福大家。（很多人跟我说这个浪费时间，我觉得这些时间最后带来的便利和自己逻辑上的梳理是很值得的。）

当然在选择什么蓝色中我们还是根据经（lao）验(ban)来选择的。

中性色来给人舒适简约的感受。

我不想拿出一个色轮很规范的和大家说多少度多少度，因为我是画画出生的，我只能说就是根据经（lao）验(ban)。

当然我也列出了一个配色表，到底用到多少不重要，重要的是我思考了。

界面初稿：

根据产品原型图我们会要开始进行初稿的设计，（由于保密问题，产品图就不在此展示了，但是也是有经过很多修改和讨论的，这类的布局方式，也是经过我们使用中觉得下bar和列表的形式更加让人觉得便捷所选择的。）

就大家看到的主页，没有一张是最终的，大概整个过程在50张以上，由于不可能只定义一个来确定整个app风格，所以由于太多我就不一一展示了，有方的圆的长的，粗的细的大的小的，间距不同，圆形不同，颜色不同，字体大小不同最终的感觉都有细微的差距，因此整一套的界面设计（一套界面6-7张），我大概做了将近30套，最后根据经（lao）验(ban)和大家的探讨，选了一套。

因此这里要说的是，不要老觉得自己设计的太多了，我至今都不觉得自己做的够多，反而觉得自己做的太少，改图是很正常的事，请保持好你的心态。

再展示一些导航栏的效果，由于我们没有ue，所以需要不同的样式都出一张，然后感受体验，最终才能确定最好的感觉。

最后的最后，我们没有侧栏这个东西了。。。（所以都白做了，这是一个悲伤的故事），所以对于需求的把握和对产品的逻辑思考取决了你的设计要做多少，很多人抱怨老板一直要改，或者做的东西白做了，每个人都经历过这些，但是我得出的经验就是，首先对于产品的逻辑和结构你必须要清楚产品的整个框架，才可以减少你的工作量，比如侧栏这个东西，在整个产品是可以优化掉的，它的形式就不是侧栏了，当你整天团团转的跟着产品走的时候，没有自己的思考和想法，无法表示自己的想法，就会出现工作量很大却没啥用的情况。

总结：在开始设计前，请了解好产品的需求，和解决方式，其次要做的是自己对于产品逻辑的梳理，请不要照着产品的原型图填充颜色，那你就承认了你自己就是个没想法的美工，无论是你自己对颜色的看法，形状的看法，设计的理念，用户的考虑，等等。请你大胆的跟所有人交流，并吸取他人的说法，来达到自我的提升。

细节考虑：

1，首先熟读所有的设计规范，请按照规范认真做。（上传附件，需要的自己下载）

2，请考虑好所有的状态，所有的情况，和可能发生的情况。

3，请统一你的设计内容，包括线的粗细，bg颜色，button样式，uikit ，icon库等等等等。

4，前面界面不会出现忽大忽小，跳转界面很突兀的问题。

在此举一点点例子

这是发送音频的一个样式，但是很多设计师为了追求视觉上的美观，一般都是理想的出一张图，然后放上适当的字体大小。所以你在做设计的时候已经不再是你想要做啥就要做啥，而是知道程序员想要知道什么，才可以更好帮你实现。一般分以下几点内容

1 所有情况，包括出错了，无法进行，半路中断等特殊样式

2 包括所有字体长度，必须告诉程序员最长多少，最短多少。

3 请把最丑的样式也设计进去，比起最好看的样式，最丑的才是关键。

4 请把你可以想到的做到极致。

这个图也许看不清楚，但是容我解释一番（这是一个发送链接功能的设计图），那么我将要考虑的是

1带图、不带图、只有字的

2自己对话框的、他人对话框的

3最长显示区域、最短怎么展示

然后是关于一个细节的注释和备注。

也许你会用markman标注一下间距，但是根据程序员写代码的习惯，都是用框架的，所以框型的结构和标注会更加精准和让他们可以理解。一些备注，会增加他们的执行能力和准确度。所以设计要稍微负责点，不要做的东西，你自己都看不清楚了，还让别人去读。

总结：设计师的好坏，最后就体现在细节上，也许外行人会跟我说，你这个设计看起来很简单啊，但是其中我反复斟酌的细节还是很多，尤其是大小和粗细，因此我还是尊重自己的设计态度，也许不给人看好，没有酷炫的作品，只求踏踏实实做好自己的工作。

界面的前后逻辑和后期迭代

1你的前面界面和后面跳转的界面不要出现例如头像大大小小，逻辑出问题等问题

2要考虑后期增加的功能可以放在哪里，尽量做到有后期延展性的设计。

总结：我会多去参考ios和安卓的规范，毕竟别人比你研究的透彻，观察他们的间距和字号颜色等等，把所有关联类似的界面放在一起进行比较，也要给程序员这样的整理，可以减少很多修改，列表的方式可以有很优秀的延展性，所以排除好看以外，以后附加内容添加在哪里也是很重要的一点。

功能的创新和交互考虑：

举例为语音功能

原型图是我自己画着思考的，我不是产品经理，很多人说画这个没有用，你又不是产品，而且老板赶着你做，但是出于一个对自己负责的人，我每次功能都会自己重新出一个设计的线框原型图，它可以粗略，但是必须要表现出整个逻辑的流畅性，界面的框架和架构布局。

需求是：

1 要可以回放试听

2 可以锁定录音（此处为特色吧，松开手还是可以继续录音）

3 可以普通的语音输入

4 可以重新录音

由于需求功能很多，那么普通的架构是放不下这么多内容的，那么这就需要动动脑子了。

如左下方的设计是比较常见的一个设计，类似qq的设计，可以解决想要的内容，那么我要考虑的是 ，是不是有个比较新型的即可以完成功能又可以有点创意。

于是最后

请无视上面的标注，那么有了设计图，动不起来，然并卵，所以为了做出一个有逼格的demo，我自己独立的去学习了flinto，在此感谢我的入门老师：杰克史派罗。在他的帮助下，我进行了一些动效交互的细节的考虑，可以做出一些可以看得到的demo。

此下为一些别的练习案例

关于交互上的细节和曲线，估计又可以写上几大篇，但是在做交互的时候要注重几点。

1明确产品页面间的交互逻辑

2明确各界面之间的复用率

3绘制动画草稿

4各元素之间的动画曲线（尊重现实生活中的物理规律）

5元素出现的持续时间和延时效果

总结：对于交互来说，我还是新手中的新手，才刚刚入门，但是我觉得这是设计师必要考虑的一个趋势，现在动效的产生，让人们越来越喜欢接受这种不经意间的惊喜和引导。所以在工作中，我会锻炼自己，和跟更多的厉害的动效设计师交流。

关于logo和icon设计

可以看我以前有个logo的介绍和飞机稿，过程当然是做过几十版只取第一个哈哈哈，前面的主页上，其实icon就每一张都在改，关于icon，我认为还是需要有一个自己的logo库的

好不好看是其次，好不好用才是关键。。多做整理，谁用谁知道。。

总结：请随时做好自己的uikit和icon库，方便以后的调用和设计师之间的交接（虽然我就一个人）。

关于引导页

只求做的精致简单，简约明了，飞机稿就不发了，就发最终的情况。

对于引导页我只说2点，怎么设计，都是根据实际情况，好不好看也是个人审美

1，请有跳过按钮，有的引导页又长又多，必须翻到最后一页也没任何提示，最后原来是要在最后一张点击一下，那么用户体验就是极差的，毕竟你不给任何用户引导。

2，请注意视觉中心，不要中心偏下偏上。起码给人感觉是稳定安定的。

切图

1，网上教程很多，请先理解px sp pd之间的关系，还有ppi是什么

2，按照自己公司的要求来切，跟程序员商量好哪台才是主要的机型，我这是ios 750  安卓720

3，偶数、偶数、偶数

4，icon套在一个固定大小的框内

公司其他部门

跟设计师有交集的就程序员和产品经理（没有ue的情况下）

程序员：

1在文章前面已经对于标注有了明确的说明，想要程序员做的跟你设计的一模一样，就要你用程序员的想法去标注设计图，因此我还自学了xcode和html。

2 好好和程序员交流，他们都是可爱的程序员，为人普遍内敛，闷骚。要他们修改细节的时候，好好说话，多用：你觉得应该怎么做比较方便呢？来请教问题。

3 关于切图名称：请按照程序员的规范来，不要自己瞎整，最后他们还是要重新命名的。

产品经理：

1我经常和他们讨论逻辑上的问题，还可以看他们的后台逻辑来学习。

2不要害怕跟他们交流，说出自己的想法，说不定不失为一个好点子

3有啥逻辑交互上的问题，他比我们专业的多，多看看他手机里密密麻麻的产品，哈哈

最后总结：

作为一名ui设计师不仅需要考虑到美观因素，更需要考虑用户、功能，后期版本迭代可能出现的问题。

这里给出的大概设计在工作中的流程

这是我心目中优秀的交互设计师所要具备的能力

此处的了解并不是要精通跟产品经理一样，任何一个职业都是综合职业，在自己的领域里优秀外还需要很多其他的知识去充实。

                谢谢各位看完的看官们