@APP改版笔记：界面篇
当我们接到需求文档或是原型设计稿后 ， 结合之前对自身产品的分析与理解 ， 同时完成与多款竞品视觉上的详细比对 ， 我们可以率先确立产品页面的主要风格 。在做竞品分析时 ， 我们可以很好的总结出当前行业内 ， 同类型产品的设计趋势 ， 但并不是完全的套用或照搬 。在设计时 ， 我们要遵循着易用性第一的原则 。
当我们接到需求文档或是原型设计稿后 ， 结合之前对自身产品的分析与理解 ， 同时完成与多款竞品视觉上的详细比对 ， 我们可以率先确立产品页面的主要风格 。在做竞品分析时 ， 我们可以很好的总结出当前行业内 ， 同类型产品的设计趋势 ， 但并不是完全的套用或照搬 。在设计时 ， 我们要遵循着易用性第一的原则 。
文章图片
文章图片
设计趋势分析 1. 渐变、活泼大胆的用色
在分析设计趋势过程中 ， 很多文章都有介绍渐变色、或者是活泼大胆用色的案例 。不过 ， 并不是所有产品都适合用渐变色或者是过于夸张的颜色来进行设计 。比如：金融类、新闻类、教育类等；对于这些类型的产品 ， 过于丰富或者是复杂的配色很容易分散用户的注意力 ， 无法让使用者聚焦内容本身 。而对于电商或者是音乐类的产品 ， 就可以用比较有活力的配色来突出渲染气氛 。
文章图片
文章图片
by George Frigo and Heartbeat Agency
在上面的案例中 ， 左面为“机票订票”的APP；右面是关于“派对、俱乐部”信息展示的APP ， 产品属性上的不同 ， 也直接导致了配色的巨大差别 。
订票产品——人们在订票的时候注意力都集中在时间 ， 航班等票务信息上 。所以 ， 为了不分散用户的注意力 ， 以及避免对信息本身造成影响 ， 产品选择了蓝、白、黑三种颜色进行搭配 。层级清晰 ， 对内容不产生打扰 ， 简洁清楚 ， 便于用户查看信息 。
资讯产品——右侧的产品是关于“派对、俱乐部”的信息展示 ， 所以选择了较为夸张的渐变配色搭配来渲染气氛 。其中的信息量也并不大 ， 所以添加了适量的元素进行装饰 ， 整体搭配和谐 。
2. 实验性的界面排版结构
文章图片
文章图片
UI8.net
丰富大胆的排版结构可以在第一时间抓住使用者的眼球 ， 大大增强了界面的整体设计感 。不过 ， 这种设计的局限性也很大 。如果页面中内容信息过多、或是排版不当、配图不当、语言不同等 ， 都会很容易起到反效果 ， 使得页面过于杂乱无法聚焦 。并且受限于手机屏幕的有限空间 ， 应用于网页端要比应用在APP端效果会好很多 。
但这种类似于杂志类的排版风格也并非完全不可取 。应用在H5页面 ， 或是详情页面等还是非常出彩的 。其延伸的设计方式还包括：全屏背景图片、海报样式页面、卡片切割式布局、悬浮效果等 。
3. 插画元素的运用
文章图片
文章图片
ofo、WALKUP、好好住 and KilaKila
现在越来越多的APP产品中都加入了插画的设计元素 。合适的插画可以营造氛围、突出传递品牌价值、增加亲和力、增加用户粘性、使页面更有趣；还能起到将抽象理念具象化的作用 。可以更好更多样的讲述品牌故事与愿景 ， 拉近产品与用户之间的距离 。
插画元素可以用在产品中的很多地方 ， 其中包括：开屏页面、loading页面、下拉刷新、banner、icon、详情页和一些指定页面等等 。我们在设计绘制插画过程中可以统一规范：颜色、造型、装饰元素等等 。这样可以反复利用、快速修改、增加效率 。
推荐阅读
- 『哈啰』哈啰APP改版：出行+本地生活加速行业进化
- 蚕豆■三星新无线耳机渲染图曝光：设计完全改版神似蚕豆搭配三款配色
- 戴尔灵：并不是只有 XPS 才轻薄！戴尔灵越 7490 移动超能版笔记本评测
- 「」联想双屏笔记本上市，这次用上了电子墨水屏
- 「ROM乐园TB」三星新无线耳机渲染图曝光：设计完全改版神似蚕豆搭配三款配色
- 【】麒麟985安兔兔跑分成绩公布；宏碁传奇14笔记本高配版上架
- 「科技犬」麒麟985安兔兔跑分成绩公布；宏碁传奇14笔记本高配版上架
- 【笔记本】联想拯救者2020款 Y9000X 笔记本正式发布：最高搭载十代i9+4K屏
- 【笔记本】笔记本外接显卡坞好不好？磐镭发布镭凌linkX显卡坞！
- 手机中国@Apple Music网页版正式上线！带着你的音乐走遍世界