由于设计没时间，项目经理说看着做，这真让人无语，所以我自己主动承担了一个功能模块的设计工作。
个人感觉除了视觉上的设计和之前的统一，还要有加入交互设计，比如一些略细微的交互动画，这样开发人员完全看着做，而不用经常来找你问。
脚手架工具我选择的是sketch + principle+zeplin。之所以选择这个脚手架，是因为现在设计注重设计理念。应该用类似的脚手架提高工作效率，一些老牌的脚手架虽然功能全面但是太过于笨重。
看了之前设计的，字号，颜色，加上我对苹果设计的一些理解。大致先总结除了一些我对于设计这个功能模块的规范。 有了这些东西大致看着视觉上比较统一。
功能模块的规范图
然后是排版上大致遵循了几个原则：
亲密性原则，封闭性原则，简洁原则，情感性原则，相似性原则。下面从一个效果图来说明
几个原则体现的效果图
体现亲密性原则是从产品信息中把学生证的信息和快递信息相关的信息归类。分成了两个大类，如果按照产品的意思一直按照顺序排列，这样就显着太臃肿，可能不太想把信息填完，整体看着比较混乱，最重要的是不够清晰。
封闭性原则体验在把不同的信息分类，学生证信息一类，学生证快递信息一类。用这种卡片样式让他们显的独立容易区分。
无线的卡片样式图
简洁性原则体现在了
各个元素之间的间距简洁，比如卡片左右上下是14px ，卡片内之间的元素是9px ,元素与卡片上下间距是14，并且元素之间的间距9px小于了元素与卡片间距14px。对齐的间距样式不是太多。
字体颜色字号不是太多。比如名字主标题是17px 副标题补办的原因是15px 备注性说明时间是13px
样式简洁去掉了分割，用这样的卡片样式加上了一点点轻微的悬浮阴影透明，显着干净大气。还有填写学生信息用一条线代表了输入框比用一个矩形框显着简洁如下图：
简洁性原则效果图
情感性原则效果图
情感型原则体现在了制卡的状态，用不同的颜色进行区分。比如接受预定，制卡中，制卡完成，颜色不同来区分这个订单的状态。
对比性原则就体现在了如下图大标题小标题备注字号颜色的对比。
对比性原则效果图
相似性原则体现在了比如同一级别的标题文字大小颜色相同。相同颜色的文字可以进行一些操作比如可点击选择等。
相似性原则效果图
一些产品方面的思考
第一点：学生证补办可能存在多次补办，所以可能存在多条，但是不会存在几十条的。所以这个页面是个列表，并且不需要加载更多的交互，再添加成功回来的时候刷新一下状态即可。在没有学生证的时候给出空白页提示并点击右上角按钮进入添加页面如下图。
加入交互动效，利用了上述Pinciple 来设计，能很直观的表达你要做的动效而非视觉上的东西下面看一个我做的效果。这个只是其实一个部分，比如一些复杂的效果，弹出支付卡片，设计一些炫酷的转场动画，加载动画等等都可以来做，这里只是举个小例子。
交互设计效果图
最终效果图
网友评论