《天府相册》APP设计与总结

相册项目总结

一、项目时间线

· 2020.6.28——2020.7.28：交互稿设计（修改了9次）

· 2020.7.29——2020.8.17：视觉稿设计（修改了4次）

· 2020.8.18——2020.9.10：UI规范文档撰写（修改了5次）

二、问题剖析

交互：

1.不符合一致性（操作）——相同或相似的功能，操作应该相同

上传图片跟创建相册都为添加动作，添加逻辑和进入方式不一致

图片和相册的编辑模式进入方法不一致

2.不符合严谨性——交互逻辑应该经得起推敲

同时修改两个相册名时无提示界面

做了不属于app内的界面

3.不符合简洁性 ——操作要简洁

4.篡改需求

视觉：

1.不符合一致性（界面）——图标、文案、色彩、布局、字体等都要保持一致性

页面风格不统一

同时使用了pc端和移动端的图标

2.不符合最小惊讶原则——功能按钮的设置应该符合用户的操作习惯

3.app配色方案单调

颜色只有黑白灰

规范文档：

1.不具有指导性——UI规范是作为项目指导通用的,不限制于特定项目

2.配色方案太少——针对不同类型的app设计不同的配色方案

3.组件拆分不正确，部分组件尺寸未标明

4.文档没有美术设计感

三、经验总结

1.交互在前，视觉在后

我们在最开始做项目的时候把交互和视觉混为一谈，做交互稿的同时把视觉设计也做了，两个方面都没有做的很好，在后面在修改交互的时候要连带着视觉稿一起修改，真正该做视觉稿的时候还要在PS里重复做一遍操作，降低了效率；正确的做法应该是前期先做交互稿，暂时先不考虑视觉效果，确定好交互之后再去美化页面。

2.视觉在前，规范在后

在开始项目的时候先去网上搜了不同系统的规范，把自己禁锢在各种条条框框里面，按照网上规定的尺寸去定字号，按钮大小，并没有考虑它放在页面里面实际的情况，为了规范而规范是没有意义的。

3.多与前端交流，考虑技术实现

视觉稿做出来是要交付给前端来实现的，我们在做的时候要考虑界面的可行性和可能存在误差的点，比如我们在视觉稿使用的单位是物理像素，而前端使用的是css像素，二者之间需要进行转换，交付时需要说明。

4.遵守设计原则，注重用户体验

设计原则参考：https://www.uisdc.com/ui-design-specification-process

设计尺寸规范：https://uiiiuiii.com/screen/ios.htm

页面展示：

部分交互链接：

相册_1：(完善交互

https://1jyrtv.axshare.com

相册_3：(统一字体字号，间距，加了按钮颜色，修改登录页

https://nkvj7e.axshare.com

相册_4:（修改“查看图片详情页”

https://z411gx.axshare.com

相册_7:（修改了除回收站图标外7.21的会议问题

https://9mdnvc.axshare.com

相册_8:（更新了回收站图标；登录异常窗口弹出；修改密码异常红字提醒；字数限制

https://3uvd33.axshare.com