UI设计必知的 B 端产品设计经验.docx

《UI设计必知的 B 端产品设计经验.docx》由会员分享，可在线阅读，更多相关《UI设计必知的 B 端产品设计经验.docx（28页珍藏版）》请在优知文库上搜索。

1、作为一个新时代全能打杂，日常工作包括移动端、PC端的Ul设计以及各类平面视觉设计，其中自然少不了令人“秃”然的B端后台产品设计。毕业两年来一直都做着B端产品的UI设计工作，参与过的后台产品设计面对的主要客户有公司内部、各大企业以及政府机构。工作和学习的过程中走过不少弯路，也在不同的项目中不断反思和总结。把自己的一些想法和经验分享出来，总结自己工作中遇到的问题和解决的方法，记录自己思考和理解的过程，也希望对即将或正在从事B端后台产品设计的你有一点点启发或帮助。希望在日后的工作和学习中，通过实践来不断完善自己对B端后台产品的理解。目录一、明修栈道C和暗度陈仓B二、后台产品设计思路三、后台产品设计规

2、范四、经验观点及设计资源正文一、明修栈道C和暗度陈仓B1.1 初识B端产品和C端产品按照C端产品和B端产品的专业术语来解释的话，C端COnSUmer,表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端BUSiness,它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。在我们日常生活中，在手机上使用的大多是C端产品，单一的C端产品通常是为了实现单一的需求，比如看网红的抖音、听音乐的酷狗、买车票的12306,社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核

3、心功能。而面向B端的产品，我个人称之为“暗度陈仓”，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即C端产品的后台产品线（BtOC）,比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。虽说我们日常使用的更多是C端产品，但是B端产品对我们的影响也是时时刻刻都存在着的。C端产品在明，逐渐改变着现代人的生活方式，B端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。“ToB还是ToC?这是个问题.”“不管TOB还是TOC,最后都还是ToP(people)

4、。B端产品功能C端产品功能1.2 B端和C端产品的区别在我看来，C端产品以消费互联网为主，B端产品以产业互联网为主，C端更感性，而B端更理性。从使用者的角度来说一C端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；B端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。从开发的角度来说一一C端周期短，B端周期长；C端用户多，B端用户少；C端逻辑简单，B端逻辑复杂；C端竞品较多，B端竞品较少；C端主战场是移动端，B端则是PC端；C端是用户体验驱动，B端是解决问题驱动：C端产品的使用决策权在用户手中，而B端产品的使用决策权则在客户手中（B端客户不一定是用户）；C端产品除了产品

5、的体验以外，也要让产品更美观，让活动更有趣，让用户更舒服，产品经理有很强的同理心，B端产品的实用性大于美观性，能切实解决问题、配置资源的B端产品才是一个好的B端产品，产品经理要具有更强的逻辑思维能力。用“RQQQ口口口口口口口QmQQQ口C端产品B端产品1.3 后台产品常见分类后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在B端产品的范围之内的，常见的类型包括： C端产品的后台产品线一一如淘宝商家版，饿了么商家版，对订单和用户进行管理，支持C端产品的业务进展： 平台级工具产品如微信公众平台，对文章和读者的数据统计和管理；各大互联网公司的开放平台，如

6、微博开放平台等； 企业级服务产品虚拟主机系统（VMWare）,云主机管理系统（深信服、Xensystem腾讯云）以及各种云SaaS: 企业的业务处理平台对内有考勤、报销等OA办公系统，对外有CRM客户管理系统，ERP资源及供应链管理系统。C端产品 后台产品线企业内部 业务处理平台二、后台产品设计思路2.1 初识后台产品设计说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多。后台产品不同于普通用户所使用的APP,它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的app,再给他几个其他的音乐APP,用户是可以

7、迅速上手并且轻易解决自己的需求的。而后台产品则不然。对于后台产品来说，首先，所见之少，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业、甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有“保密协议”的使命感，所谓“隔行如隔山”，在后台产品更是如此；最后，后台产品设计往往没

8、有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。这大概就是后台产品相关资源较少、设计难度较大的一些原因。2.2 后台UI设计工作流程后台Ul设计的工作，大体分为三个部分：需求分析设计执行数据分析。在需求分析阶段,要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有

9、哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。在设计执行阶段，参照PM给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做Ul视觉方面的设计，而这时后端同步构思需求的实现方案。Ul设计师向前端了解实现框架，方便交接和沟通。当界面实现，Ul设计师应该是最早进行测

10、试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。X需求分析设计执行数据分析2.3制定设计规范的作用为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。对产品一一在项目完成第一版较为稳

11、定的版本时，着手制定设计标准，统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出；对自己一一组件化同类元素，提高工作效率，建立公司产品的组件库，以便不同项目的复用及设计延展；在同一个项目中也能更好的把控该项目的视觉规范，提高效率；对团队一一设计规范的制定，规范了设计团队的输出，同时方便了与开发团队的交接和协作。通过设计规范的制定，前端实现也能拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作；对客户一一制定设计规范的同时需要考虑设计延展性，为不同客户的定制化需求提供更高效的输出。同时在进行产品迭代时，设计规范的组

12、件化调整也大大提高了工作效率。三、后台产品设计规范米以下内容仅供参考和交流，图片内容不代表真实尺寸，请结合特定产品灵活使用。3.1 页面布局统一尺寸据统计，目前PC端用户屏幕分辨率占比排名前三的是：1920*1080.1366*768.1440*900,以1440来设计的话，向上适配或者向下适配误差会比较小。适配方案一一面向多个客户,后台产品设计功能型页面的尺寸统一为1440*900,按照栅格系统原则向上或向下适配；展示型页面以1440*900为主，同时设计出极端情况（宽度为1280以及宽度为1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统,由于各个职工电

13、脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。页面框架一一页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。栅格布局一一栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和

14、产品开发。响应式栅格采用24列栅格体系实现，以满足2,3,4,5,6分比布局等多种情况。固定宽度Column,将间隔Gutter进行动态缩放。需要栅格化处理的内容的总宽度=23列（1歹bl宽度ColUmn+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Guttere谷歌规定模块和结构之间要以8px为基准,布局间相对间距可采用8px以及8的倍数，但一些小组件（按钮、间隔、输入框）可以以4为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。尺寸设定一一一般在整体区域左上角放置产品LOGO及产品名称，大部分系统顶部栏高度48+8n,侧边栏宽度200+8n.我常用的是顶

15、部栏高度56px,侧边栏宽度200px,侧边栏收缩状态宽度56px,右侧的侧浮窗宽度400px0相对间隔一一定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。上下布局主体内容楣格左右布局收起侧边栏3.2 标准色颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。辅助色用于提示其他场景，比如成功、失败、警告、无效等。中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。WF2F2F2REBEEF5*B2B3B4ESE5E5*F8FBFEWFFFFFF3.3 标准字后台系统常用的字体：WindOWS系统，中文MierOSOftYaHei,英文Aria1；MaC字体,中文