全栈开发一个微信小程序:设计篇

2019-09-0319:37:59APP与小程序开发全栈开发一个微信小程序:设计篇已关闭评论2,355 views字数 1504阅读模式

产品在经过需求原型阶段后,明确了设计目的,就可以进入设计阶段了。这个阶段需要在上一阶段的基础之上更深入地消化需求细节,最终将需求落地为具体的视觉解决方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

一、配色方案

色彩是视觉方案中非常重要的因素,好的配色方案可以增强产品可用性,提升产品氛围,增强产品情感化诉求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

考虑到在找东西这种场景下,用户的情绪一般是处于较为焦躁的状态,所以需要在色彩方面进行“降温”,避免刺激用户情绪,这种情况下选用冷色系色彩较为适宜。基于以上考量,我最终决定采用蓝色作为产品主题色,以烘托“高效、明快、整洁”的用户情感诉求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

全栈开发一个微信小程序:设计篇

推荐配色工具:ColorSchemer Studio。如果不想安装客户端的话,可以试试在线版:ColorScheme Designer文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

二、UI 规范

那么接下来就付诸 UI 设计吗?答案是:不!UI 设计不同于绘画、雕塑这类需要天马行空般想象力的艺术创造,很多情况下它处于各种条条框框的限制之下,这些条条框框,就是规范。正是这些规范,统一了设计差异性,降低了用户学习成本,使得我们开发出的产品更易于使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

既然我们是基于小程序这个平台进行设计,那么就很有必要先去了解下小程序的 UI 规范(传送门),官方还提供了对应的 UI 组件库 可供下载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

全栈开发一个微信小程序:设计篇

官方这个 UI 组件库源文件(WeUI1.0.psd),里面的内容几乎都是微信公众号的组件用例,并没有小程序 navigateBar、titleBar 和 tabBar 这些关键组件的用例,所以还是得自己根据官方设计文档中的只言片语,自己摸索。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

三、界面设计

1. 工具

在界面设计上,我选择使用 Axure 来制作界面的高保真原型图,代替设计图,我的依据是:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

  1. Axure 的做图效率比 PS 高(Windows 党用不了 Sketch……);
  2. 像图标、背景图这类图片素材,可使用第三方现有的资源,所以无需切图;
  3. 界面元素完全遵循官方的 UI 规范,不存在“标新立异”的元素,所以对设计图上 UI 细节的要求较低。

当然,这只是我的主观意见,大家可根据自身项目特点来合理选择用 PhotoShop、Sketch、Illustractor 这类专业的设计图制作软件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

2. 设计尺寸

鉴于官方提供的 UI 组件库里并没有现成的小程序特有组件的用例,所以在开始设计前,我自行制作了微信小程序的“外壳” Axure 元件库,来作为界面设计图尺寸方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

全栈开发一个微信小程序:设计篇

尺寸上采用基于 iPhone6 的 375×667 作为设计尺寸。如果是做高清设计图,且需要切图交付的话,建议使用 iPhon 6 的 750×1334 像素尺寸作为设计尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

这里需要了解小程序中的一个单位尺寸———— rpx。即 responsive pixel,翻译过来就是响应像素,它是一个可以根据屏幕宽度进行自适应的单位。小程序官方规定屏幕宽度为 750rpx,如在 iPhone6 上,则有:750rpx = 375px(屏幕像素宽度)= 750物理像素,此时 1rpx = 0.5px(屏幕像素宽度)= 1物理像素。所以如果设计图是按照 375×667 设计的,则换算成 rpx 单位时需要乘以 2;如果设计图是按照 750×1334 设计的,则按 1:1 处理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

3. 设计图

本人非美术科班出身,纯野路子设计,大家就凑合看吧……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

全栈开发一个微信小程序:设计篇

四、交互设计

在有了界面设计图后,我们需要对设计图进行交互设计,工作内容包括:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

  1. 页面元素的交互效果(按压、拖动、长按等);
  2. 页面加载、跳转(转场)效果;
  3. 各种边界情况的页面显示,如空状态;
  4. 动画特效;
  5. 走查用户路径是否形成闭环,业务交互逻辑有无异常。
全栈开发一个微信小程序:设计篇

作者:wingmeng
链接:https://juejin.im/post/5d6e11d8e51d4561c67840d7
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16044.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/16044.html