从0计划App（7）：基于产物定位做 UI 计划

至此，我们完成了app的定位、体系架构、产物布局、重要的2大流程图（营业、页面流程图）以及全部页面的原型稿和交互稿，接下来本文将环绕UI的计划睁开。

本系列是笔者拆解从0到1计划「职得App」，这个作品辅佐我拿了好几个offer，因此出格睁开分享给各人。之前的文章，可以在笔者的小我私人中心阅读，接待订阅～

一、市场说明篇：市场说明（上）；市场说明（下）

二、竞品说明篇：竞品说明

三、用户调研篇：用户调研（上）；用户调研（下）

四、需求打点篇：需求打点

五、架构流程篇：产物定位（上）；体系架构/产物布局（中）；营业、页面流程图（下）

六、原型计划篇：原型&交互计划

七、UI计划篇（本文）

八、PRD文档篇

在此声明：本系列的产物内容原创且非商用，若有类似，你抄我的！

一、媒介

在上一篇原型&交互计划中，我们按照营业流程图和页面流程图来做出来了可以或许给开拓行使的原型图和交互图。

个中重点拿「学员看视频流程」这个看似简朴的流程做结案例拆解，我们获得了如下：

原型图（线框图）：

交互稿（低保真原型）：

接下来就是针对定稿的交互稿，让UI同事认真包装和开拓类型。

二、UI计划稿

前次我们也提到了，普通来说，UI稿就是去界说视觉长什么样子，同时也认真交付给技能开拓，因此还必要拟定开拓类型。

• 原型需求稿：页面有什么成果（why）
• 交互UE稿：成果怎样被用户行使（how）
• 视觉UI稿：成果长什么样子（what）

因此，如下图，UI计划稿可以分为两层：「视觉观念计划」和「计划执行类型」。

前者是产物司理必要存眷的，尔后者则是技能开拓必要存眷的。对付「职得App」这样一款模仿、从0到1计划的产物。尤其重视计划原则、计划模式、情绪共识、视觉布局和条理等。

2.1 视觉观念计划

视觉绝对是用户体验的一环，这个已经是知识。最闻名的就是《用户体验要素》这本书的用户体验五层框架。如下图，视觉层就是「示意层」：包括有屏的产物操纵体系视觉和产物外面视觉可能说最终产物的外面。

有些人以为视觉计划和产物司理无关，大错特错。在之前xxxxx（产物界说）的文章中我就提到了产物司理做了成果定位、用户画像的描写以及产物方针。而视觉计划正是基于此，即「示意层」是基于「计谋层」和「范畴层」的理念，又是在「布局层」和「框架层」长举办加工包装。

交互计划和视觉计划很相似，但又完全差异。如下图-右，视觉观念计划包罗品牌、logo、需求/代价观、icon、字体、尺寸外形等。

回到我们「职得App」的项目中来，回首一下在之前做的产物定位：

名称：职得App

定位：大牛培伴式互联网职场手艺进修平台；

slogan：陪练十遍，手艺自现；

方针用户：非一线互联网职场新人；

用户痛点：在中小型公司得不到业界大牛指点岗亭手艺的机遇。

起首定下整体品牌、logo和色彩基调：选用蓝色冷色调作为首要色调，与职场相干，在loge计划上突出棱角，彰显手艺的锐利和重要性。其它整体logo回收微渐变，浮现出呼吸感和前卫感，与传统职场暮气沉沉的古板印象区分隔来。

正常环境下公司的产物都不是从0开始，而且很少会窜改整体品牌气魄威风凛凛。一样平常的需求窜改更多涉及是依据公司现有的色彩、尺寸、字体类型来做新的icon的计划、元素计划、页面计划。

这里贴一篇腾讯小措施UI：https://isux.tencent.com/articles/QQ-mini-program.html。讲的就是怎样计划游戏类小措施的UI视觉，完全基于产物的定位和属性来举办计划色彩、外形、尺寸和调性。

对付「职得App」来说也是云云，由于一期产物相对很简朴，因此按照上面定下来的整体品牌感受，着重针对icon、字体、尚有尺寸计划。

icon：

字体：

各页面尺寸：

结果图：

留意，在「视觉观念计划」阶段，我们注重的是「定位」「情绪」「调性」「代价观」这些词语。视觉的感受可否匹配产物的定位可能是成果的目标。

譬喻：品牌情绪的输出与职场相干则选择冷色调为主，但又夸大的是随同式，不能过于古板，会选择柔和和icon。在V1.0.0版成果上是夸大「大牛、圈主」，因此在举办尺寸计划时页面更多展示圈主的信息和内容。

作为产物司理，你要去和UI计划师把控整体产物在视觉上浮现出来的感受。整体的画风是否是你想要的，可能说是否和当前产物所保持同等。

2.2 计划执行类型

除了产物司理存眷的视觉观念计划之外。UI计划师还必要按照观念计划举办「标注」、「切图」的事变，由于技能开拓要完全凭证这些标注数据来举办开拓。

我们今朝获得了「职得App」各页面的观念计划图。部门图如下：

此刻假设本身是UI计划师，你还必要对这些图片举办「标注」和「切图」，不然无法开拓。

因为「职得app」是我在「出发点学院就业特训营」的模仿项目，并非公司贸易项目，用不着交付给技能开拓同窗。因此没有举办标注和切图，并且产物司理并不必要相识这方面的常识，除非公司小到不得不兼任计划师。

关于「标注」和「切图」，这篇文章写得不错，有乐趣的产物司理可能悲催到切图也要本身上的产物司理，可以具体研究一下。

或许每个页面、每个元素会酿成如下：

最后贴上「职得APP」的所有观念计划稿：https://www.zcool.com.cn/work/ZNDA5NjA5MDg=.html

三、总结

起首，再次感激计划师伴侣Vincent（站酷&微博：杨锦Vincent），赋予了一个模仿从0计划APP项目「职得App」新生，没有UI计划的app是没有魂灵的！要计划的伴侣可以接洽他。

此刻计划稿也有了，把之前全部的对象清算成PRD即可！以是，下一篇内容：从0计划App（8）：PRD撰写，也是这个系列的最后一篇内容。

作者：朱鲁斌，公家号：字字朱心。每周深度思索一个题目，不不变的天下里找到一份笃定。

本文素材来自互联网

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!