运营第4章 运营视觉设计思维导图
对运营视觉设计的概述
树图思维导图提供 运营第4章 运营视觉设计 在线思维导图免费制作，点击“编辑”按钮，可对 运营第4章 运营视觉设计 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：79d077a9a0ed78a7bf4f93f0c754236b
思维导图大纲
运营第4章 运营视觉设计思维导图模板大纲
4.1 功能界面设计
4.1.1 功能界面设计流程
以下是微厅功能界面的设计流程。
（1）沟通设计需求。
设计师接到产品经理的设计需求，需了解产品的本质，明确用户需求，了解用户使用习惯，与产品经理反复沟通确认需求。
（2）细化原型图。
在产品经理或交互设计师提供的原型图和流程图的基础上做细化，了解每个页面的使用场景，检验产品流程是否顺畅，是否缺少页面，异常页面是否都已经考虑到。
（3）梳理页面信息。
对每个页面的信息进行梳理，确定每个页面所强调的内容信息。
（4）正式着手设计。
1）从某一个重要的页面（如首页）开始着手做设计。
2）某一个页面做完了跟总监们还有团队人员一起讨论确认风格是否通过，是否符合产品本身的气质，可以一连出好几个版本做对比。
3）选定一个版本并进行细化，细化不同状态下的按钮、文字大小。
4）按照功能界面的逻辑关系，对其余页面进行同一化设计，包含字体、字号、颜色、图标的统一性，以及异常状态的界面设计。
（5）页面评审。
全套页面设计完成后，交给产品经理进行评审。
（6）标注尺寸。
标注好页面尺寸，交给前端工程师。
4.1.2 功能界面设计规范
1．颜色使用规范
微厅针对每个公众号都单独建立了一套用色体系，针对品牌色、辅助色做了明确的定义，同时设定了文字、背景、按钮等所有内容的用色标准。
2．页面布局规范
页面布局规范，主要是设定页面元素的摆放位置及元素间的间距。
3．字体识别使用
在移动产品的设计上，如果没有特殊需求，一般采用系统默认的字体。
在iOS平台上，要达到与系统默认字体一致的显示效果，中文需选择“黑体－简”或者Heiti SC，数字和英文选择Verdanan，如手机上没有其字体变显示为Helvetice（Neue）。
通常字号在34、32、28、26、24、22号，其中22号为最小建议字号。
除了大小区分层级外，还有通过颜色区分功能。
文字状态主要有：常态、选中、强调、辅助说明、链接等。
4．控件识别使用
控件包括了界面按钮、列表按钮、输入框、控件元素等。
界面按钮：圆角10px，高度84px，最大宽度600px，字体颜色＃ffffff，字号36px，点击状态文字透明度60%。按钮圆角、高度、最大宽度、文字常态及点击态颜色，数值都需严格遵守规范。
5．弹框规范使用
弹框包括了双按钮弹框、单按钮弹框、说明性弹框、无按钮弹框、选项弹框、提示性弹框等不同的弹框类别。
6．导航设计
微厅目前在用标签式导航、九宫格导航、桌面式导航、下拉列表导航、列表导航、分段选项卡导航等各种不同类型的导航模式。下面是九宫格导航的页面规范。
7．加载设计
加载设计的原则：让加载时间变得更有价值、让等待变得更有趣、保持用户感受的连续性。
以下是缓存加载的相关内容。
缓存加载是针对在无网络的情况下，让用户仍然能看到缓存在本地的有用信息，不会出现空白界面。它解决了设计体验和感官上的很多问题，主要体现在以下一些方面。
（1）一般在主要界面上的处理都会使用缓存加载，避免在无网络时让用户面对一个空白界面。例如，首页内容一般都会使用缓存加载，以给用户最好的观感。
（2）缓存加载可以有效减少用户的访问流量，同时加快访问速度。一些框架的频繁加载，尤其需要使用缓存的方式。
4.1.3 功能界面设计案例
4.2 营销界面设计
最刺激：用户一般喜欢占便宜，有从众心理，因此，围绕优惠打折、社会热点、文化氛围、商品本身开展设计，这些最能刺激用户。
最快速：设计时需要充分展现营销界面的核心利益点，并在3秒内让用户看到和理解核心诉求，因为用户在一个界面上最多停留3秒。
最诱惑：读图的时代，可以用图形和文字结合的方式，设计吸引用户眼球且容易被用户记住的界面。
最直接：在设计中需消除容易分散用户注意力的“噪声”，不要让装饰性的设计元素喧宾夺主。
最大牌：营造大电影的视觉氛围，提升视觉感受与品质。如果活动本身的利益点不是非常明显，可以使用此方法来解决。
4.2.1 营销界面设计流程
设计准备：设计师需充分了解活动背景、活动诉求以及目标用户情况，可以请运营人员对活动做一个详细的讲解。
只有充分了解活动的整体目标及诉求，后续的设计工作才会有重心和侧重点。
设计过程：设计过程中，首先要做的是提炼设计要点，在构思活动页面后，还需要跟前端工程师沟通页面特效实现的可行性。
营销页面一般会有10多个页面，首先要设计的是营销活动的主页面，可以出两套不同设计风格的主页面供客户挑选，等主页面定稿后再完成全套的页面设计。
设计收尾：将设计好的页面放入手机查看最终静态效果，若没有问题就提交视觉页面评审，评审通过后标注页面尺寸，再交付前端工程师切图。
4.3 视觉设计技巧
4.3.1 界面设计小技巧
1．关于色彩
色彩有自己的语言，不同的颜色会给用户不同的感觉，唤起用户不同的情绪反应。
2．关于风格
扁平化设计风格，主要面向功能性界面以及偏营造氛围的营销界面。
扁平化设计使得整个页面比较干净大方，适合需要突出大标题的活动界面设计，如打折、优惠等，能够拉近用户，互动性好。
例如，宽带智能遥控器的界面设计，主题显得比较明确，整个页面也非常干净。
手绘类设计风格，主要面向活动性质浓、趣味性强及温情性的营销活动界面。
活动性质浓的活动如儿童节、愚人节；温情的节日如母亲节、父亲节等。
手法风格优点是形式多样，不拘泥、不呆板、代入感强，
缺点是主题不够突出、噪音大、用户不容易看到重点。
3．关于构图
（1）对称平衡。
如果你想要页面看起来美观且使用户视觉舒适，就需要一个对称平衡的构图方式。
通过中心轴的对称平衡，实现最基本安全的美观和稳重感。
这个页面带给用户的感受是：正式、正规、美观、优雅、稳。
（2）不对称平衡。
不对称这种构图方式做不好可能会变得很糟糕，但一旦掌握了不对称平衡，就会得到一幅轻松自由的画面。
灵活、轻松。
4．关于背景
背景的目的是渲染气氛烘托主题，更好地展示页面的活动氛围。
由于其所占的颜色比例较大，所以背景基本上就确定了页面的主色调，以及相应主题文字的颜色等内容。主色调会创建活动的整体氛围，进而影响页面的整体风格。
背景的风格大致可分为：纯色、渐变、大图、图案、模糊等。
4.3.2 界面设计的有效评价
1．检查主题设计
主题设计往往是一个界面最重要的设计。因此，首先要检查主题设计是否完整表达产品或营销活动的内容。有时设计师会追求页面的美感，而缺少营销上的设计，比如活动要体现打折促销的信息，结果界面的主题没有突出这个信息，这时就要提醒设计师进行修改。
2．检查设计风格
不同类型的活动和不同的用户群体，会对应不同的设计风格，比如七夕节用相对温暖的甜蜜风格比较合适，春节用热闹喜庆的风格比较合适。因此需检查设计风格是否适合目标群体。
3．检查布局排版
检查所有需要表达的内容是否都被放在正确的位置，布局排版上是否主次分明，重点突出。
4．检查界面逻辑
界面也讲究逻辑，特别是检查界面上面的文案结构和界面设计是否搭配，避免文案是并列关系，对应到界面设计变成了有先后的顺序关系。同时，要检查优先显示的内容和次要显示的内容，是否安排合理。
5．检查颜色
一般页面用色不宜超过3种，并选定1种颜色作为主色调，除非设计师对颜色有很强的驾驭能力，否则会出现色彩过多破坏美感的情况。
4.3.3 设计风险规避
1．肖像权
肖像分为实体肖像和插画肖像，实体肖像一般指用户的照片，插画肖像是指设计的形象参照了用户的肖像
2．字体权
使用微软、WPS软件自带字体相对安全，不大会涉及版权问题。
商业使用字体之前，需要跟公司申请购买字体。
设计师做界面设计时，可以加入各种字体设计，如变形、拉伸、特效等，以规避使用公司没有购买的字体带来的侵权。
3．版权
可以到全景、123RF、壹图网等平台购买图片版权。
如果下载图片后用于商业用途，那么必须取得图片作者的许可，并依照约定或者《著作权法》有关规定支付原作者一定费用才可使用，否则将构成著作权侵权。
在使用照片时，仅仅用到静物照而非人物照，也需要明确静物照的来源和用途，若没有得到授权而用于商业使用，则构成侵犯该作品作者的著作权。
4．页面外链
网站链接的方式主要有两种：一种是提供路标的链接，比如“友情链接”；
第一种链接方式实际上是向访问者提供网址。网址本身只是一则信息，不是作品，因而提供网址、提供新的信息源的行为并不构成著作权侵权。
另一种是直接指向被链接者的某一个特定的栏目或被链接网站的具体内容（该网站的底层页面）的链接。
第二种链接方式下，进行链接的网站以被链接网站的具体内容为自己网页的内容，其网页应属《著作权法》中所说的编辑作品。如果未经被链接网站的同意，也没有注明出处，则该链接行为构成著作权侵权。
4.4 一名视觉设计师的自我修养
1．做T型设计师
纵向上，除了对单一设计领域有深度了解，还需在广度上熟悉其他设计领域的设计内容及设计方法，了解视觉设计技术、交互设计、设计工具、设计载体屏幕的尺寸等。
横向上，可以多了解产品和开发实现原理，了解用户研究、产品设计、交互设计、前端开发、后期开发、产品运营等。
2．眼界开阔
设计师需关注设计潮流，不断尝试新的设计风格，用专业的设计力量去影响和推动业务的发展。
3．热爱生活
设计灵感可能来源于自然界、生命、佛学等。
设计师需具备用户同理心，这样才能更好地把握用户需求，设计出让用户心动的界面。以下是建立同理心的一些技巧。
（1）把自己融入用户的世界中。
离开电脑跟用户多交流，了解他们的爱好、生活习惯、手机使用偏好等，并建立不同用户群的用户画像，为后续的设计打好基础。
（2）创建一个人物角色。
设计时虚拟一个用户角色，每一步的设计都去思考这么设计用户会有什么反应，他们期待什么效果。
（3）保持一颗体贴的心。
想象这个界面设计出来是给自己所爱的人看的，也可以在桌上放置男女朋友的照片，让自己时刻保持体贴的心。
（4）了解未完成的故事。
很多时候，设计师因工作任务繁重，往往只顾眼前的工作，而忽略思考设计在整个环节中的作用，以及这些设计将引起用户怎样的反应，而这样的设计往往无法做到超出用户预期。
相关思维导图模板
树图思维导图提供 第二章 共轴球面系统的物像关系 在线思维导图免费制作，点击“编辑”按钮，可对 第二章 共轴球面系统的物像关系 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：88ea3ee2aef679a6b838559185af9f8e
树图思维导图提供 胡壮麟语言学第一章 在线思维导图免费制作，点击“编辑”按钮，可对 胡壮麟语言学第一章 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：5142c798bac4d4a2aea3671866e5e0ff
沪公网安备 31011502019485号
上海工商