UI设计师需要掌握的B端产品设计流程


  时间:2020-04-10 16:15 来源: 作者:白山新闻网

随着互联网的不断发展,市场上对设计师的能力要求也有不同的偏向,而今天我们就通过案例分析来了一下,B端产品设计的设计流程都包含哪些步骤。

UI设计师需要掌握的B端产品设计流程

1、需求分析

分析产品的背景是什么,要做什么,要给用户怎样的视觉感受?他的竞品状况是怎样的进行一些分析(一般b端的产品竞品是极少的),了解一些行业内的资料。

目标用户群有哪些?不同角色的用户有哪些具体的权限?(这里简要了解下大概的人群,没必要像c端产品那种那么明确)

设计的产品主要解决用户或者业务上的哪些具体痛点,复现分析下使用场景,在需求分析阶段,要对产品本身和行业本身有一些基本的认知。

2、使用场景、硬件情况

了解用户的使用场景,可以有助于我们复现分析用户是如何使用我们设计的界面的。

用户的硬件情况,了解主流用户的屏幕分辨率是多少,根据主流分辨率做设计稿。现在PC主流的分辨率占比排名前三的是1920*1080、1366*768、1440*900,以1440来设计的话,向上适配或者向下适配误差会比较小。这里也不是必需,如果用户全部都是用小屏笔记本办公,在1920设计稿上做适配可能小屏幕上展示会出现滚动条,会比较拥挤。

3、导航类型

水平导航布局:类似于普通网页的布局样式导航,顺应了从上至下的正常浏览顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度。适用于导航较少,页面篇幅较长的产品。

垂直导航布局:可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。菜单栏还可以展开收起,适用于结构简单的产品。

混合导航布局:结合了水平导航和垂直导航的特点,层级可以扩展到二、三级菜单,且能够更加清晰地区分常用业务功能操作和辅助操作。适用于功能模块较多、较复杂的工具类型后台。

不同形态的布局,适配方式也不同。在做设计之前了解下适配的原理,避免在不同设备上出现视觉上的误差。水平导航布局,在适配方案中做法是对两边留白区域进行小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。

4、颜色

颜色上大致分为品牌色(可以结合业务久久精品热99看属性)、功能色(比如红黄绿蓝灯成功、出错、失败、提醒、链接等。功能色的选取需要遵循用户对色彩的基本认知)、中性色(如深灰中灰浅灰,文字部分应用居多,此外背景、边框、分割线、等场景中也非常常见)其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

5、字体

在B端系统中优先使用系统默认的界面字体,常用中文字体有微软雅黑、苹方、思源黑体,英文字体有Arial、Helvetica系统不同展示的字体也不相同。

字体大小常见的有12px、13px、14px、16px、20px、24px、30px等。

6、规范

一份好的规范能够让设计和开发更加高效的工作,并且能够指引一些设计的细节,通过对大小、颜色、边距等、呼吸感等一些细节点的标注,可以让新加入的设计师快速上手设计。一个项目会有多个设计师的参与,规范化的设计语言,避免因设计控件混乱而影响设计输出。好的设计规范还能统一在产品中不同页面的相同板块的样式问题,为开发组件库奠定基础。

7、高质量设计交付

设计稿命名一定要清晰规范,现在好多切图标注的插件,一键生成切图标注。现在就没有必要单独整理切图标注了,但是设计稿在交付前切图的命名一定要在设计稿里整理清楚,规范命名方便开发查阅。

8、设计追踪、校验

设计稿给到开发在设计过程中,要随时跟开发沟通。项目上线后要对线上效果进行实时UI校验,保证开发同学对设计稿的高度还原。还有就是对设计上线后的验证工作,用户使用和反馈是优化产品的重要途径,针对性地在一些主流的页面模块按钮进行一些数据的埋点,统计下用户的点击状况,实时对数据进行一些跟进,为下次页面改版优化,提供有力的数据支撑,提升产品的用户体验。

节选:公众号:小六可视化设计

【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。

 

上一篇:机器学习的概念解析
下一篇:没有了


白山新闻网 ICP备案:鄂icp备14004636号-1