微信小程序全栈开发：设计

产品通过需求原型阶段，明确设计目标后，即可进入设计阶段。这一步需要在上一步的基础上对需求细节进行更深入的消化，最终将需求落实到具体的可视化解决方案中。

1. 配色方案

颜色是视觉方案中非常重要的因素。好的配色方案可以增强产品的可用性、增强产品的氛围、增强产品的情感诉求。

考虑到在找东西的场景中，用户的心情普遍处于比较焦虑的状态，所以需要对颜色进行“降温”，避免刺激用户的心情。这种情况下，选择冷色比较合适。基于以上考虑，我最终决定采用蓝色作为产品的主题色，以凸显用户“高效、明亮、干净”的情感诉求。

推荐配色工具：ColorSchemer Studio。如果不想安装客户端，可以尝试在线版本：ColorScheme Designer

2. UI 规范

那么UI 设计呢？答案是不！ UI设计不同于绘画、雕塑等需要无拘无束的想象力的艺术创作。很多时候是受到各种法规的约束。这些规则是规范。正是这些规范协调了设计差异，降低了用户学习成本，让我们开发的产品更容易使用。

由于我们是基于小程序平台进行设计，所以首先有必要了解一下小程序的UI（门户）规范。官方还提供了相应的UI组件库供下载。

官方UI组件库源文件（WeUI1.0.psd）包含了微信几乎所有的组件用例公众号。小部件navigationBar、titleBar、tabBar等关键组件没有用例，所以还是得用，我根据官方设计文档的几句话自己摸索了一下。

3。接口设计

1.工具

关于界面设计，我选择使用Axure来制作界面的高保真原型，而不是设计图。我的依据是：

1. Axure的画图效率比PS高（Windows用户不能用Sketch...）；
2. 图标、背景图等图片素材可以使用现有的第三方资源，无需对图片进行裁剪；
3. 界面元素完全遵循官方UI规范中没有“非常规”元素，因此对设计图上的UI细节要求较低。

这当然只是我的主观意见。您可以根据自己项目的特点选择使用PhotoShop、Sketch、Illustrator等专业设计图制作软件。

2。设计尺寸

由于官方UI组件库中没有现成的小部件特定组件的用例，因此在开始设计之前，我为微信小部件创建了自己的“外壳”Axure组件库。比如界面设计图纸尺寸表。

尺寸采用基于iPhone6的375×667作为设计尺寸。如果您正在制作高分辨率的设计图，需要裁剪交付，建议使用iPhone 6的750×1334像素尺寸作为设计尺寸。

这里需要了解Widget中的一个单位尺寸——rpx。即responsive Pixel，翻译为响应式像素，是一种能够适应屏幕宽度的设备。该widget的官方规定是屏幕宽度为750rpx。例如在iPhone6上是：750rpx = 375px（屏幕像素宽度）= 750个物理像素。此时，1rpx = 0.5px（屏幕像素宽度）= 1 个物理像素。因此，如果设计图是按照375×667设计的，转换为rpx单位必须乘以2；如果设计图是按照750×1334设计的，则按照1：1处理。 ？工作内容包括：

1. 页面元素的交互效果（按下、拖动、长按等）；
2. 页面加载、跳转（过渡）效果；
3. 不同边界情况页面显示为空；
4. 动画特效；
5. 检查用户路径是否形成闭环，业务交互逻辑是否存在异常。

作者：wingmeng
链接：https://juejin.im/post/5d6e11d8e51d4561c67840d7
来源：掘金
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。