b端网站设计效果图(b端产品设计首页)

网站设计 1579
今天给各位分享b端网站设计效果图的知识,其中也会对b端产品设计首页进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、网页设计效果图你们是怎么设计的?

今天给各位分享b端网站设计效果图的知识,其中也会对b端产品设计首页进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

网页设计效果图你们是怎么设计的?

我设计的时候就是先在白纸上画个草图,然后让别人提意见,然后在修改草图,再设计效果图,再切图,呵呵~反正就是替别人做不容易,多听点意见

关于B端系统的产品设计

过去的一年,负责的业务主要聚焦于平台运营,随着业务模式的成熟,也负责建设了许多营销系统。

本文将以此前实际设计的案例与大家分享 关于B端 系统的产品设计。

关于系统,个人认为是将 无序、散乱的业务抽象成中心化、标准化的有序服务。 而中台则在系统之上再上升一层,将 系统的共性抽象成通用服务。

而中心化和标准化的动机又是什么呢?较高频的动机有三条:

1)  业务模式足够成熟

2)  高频需求重复占用资源,且不具备复用性。

3)  旧有系统耦合性强,延展性弱。

在企业的早期阶段,一些非高频的共性需求并没有可依赖的中台系统。为了迅速上线及满足业务的需求,大多会将其耦合于该系统之中。

但当其他系统有相同需求时无法复用,需要额外开发相同的逻辑。不仅重复消耗资源,后续的迭代难度也会不断提升。

通过需求分析所确定的产品定位,能够明确系统要解决的 核心问题 是什么。而梳理业务流程,则作用在 问题解决的深度。

理解业务流程目的是梳理系统架构,从而划分系统的边界。边界清晰能够让系统各司其职,专注于自身的功能,并尽量提供可复用的能力。

以抽奖系统为例,输出其系统架构:

对于抽奖系统而言,它应该专注于抽奖的规则,如:抽奖次数来源、中奖概率、限中次数等等。

对于抽出的奖品是什么,奖品怎么发放,应该由奖品管理、奖品发放系统去消化;而奖品发放所触发的触达则应该交由触达系统。

什么时候应该将非核心需求抽象成中台系统,什么时候又应该耦合呢?个人认为应从其需求频次、强度以及投入产出比考虑。

在梳理了新系统与现有系统的耦合关系后,下一步则是确认中心化的对象,中心化的方式不同,其核心逻辑、功能框架也会不同。

以奖品管理系统为例,其中心化的方案可以有两种,如下图所示:

方案1以奖品作为中心,一个奖品将能够被多个业务方所使用。因其层级较少,产品、技术设计会更为简单,后续业务方的操作也更为轻便;

而方案2以奖品池作为中心,每个奖池的奖品相互独立,虽然方案更为复杂,但优势是其数据相互独立,更有利于成本核算以及风控。

当中心化的方案确定,系统的的核心逻辑及数据模型也就初见雏形了。

梳理功能框架相信大家都非常熟悉,本小节主要描述最小单元。 最小单元,指无法继续拆解的功能,其通用性的强弱也决定着系统的延展性 。

以下将以前端配置化系统为例和朋友们分享,以下的示例分别是最基础设计方式,以及有赞和笔者的设计方式:

1)固定组件、固定配置

第一种做法,是最基础的做法。它的思路是对固定的组件进行固定的配置。

以抽奖活动为例:

上图的两种抽奖玩法对应着两种前端样式,左侧是九宫格,右侧是老虎机。这两种样式对应着头图、抽奖模块、我的奖品及活动规则四个组件。

根据它们组件的共性,我们能抽象的最小单元是页面头图、页面底色、活动规则、抽奖按钮的颜色、文字等内容。

由于共性不足,它们的最小单元已经无法延伸。当后续增加新的模板“大转盘”时,我们就需要再次抽象并迭代,这种设计方案是非常不灵活的,而且最小单元很可能会再次减少。

最小单元共性越少,延展性越差,后续开发的工作量越多。

从九宫格的“我的奖品”、老虎机的“活动规则”来看,它们属于各自的私有属性,原则上而言我们也能够设计成配置项,但从投入产出比、延展性来看显得不太划算。

2)有赞:多种组件、独立配置

有赞的设计思路也是比较常见的设计思路,它的每个组件拥有独立的配置项。

上图分别是有赞中拼团、砍价组件对应的配置项,在图片的红框部分是商品模块的配置,同样是自动获取商品类型,拼团组件的配置项比砍价多了一个排序规则。

这种设计方式的优点是该组件能够很轻易的适配业务方的需求,灵活性能够达到最高。缺点则是组件的特性没有办法复用,某个商品模块或按钮的特性是无法复用到其他组件的商品模块或组件之中。

结合了上述的两种设计思路,根据实际业务方的诉求,笔者设计的思路为:多种组件、共用配置。

3)多种组件、共用配置

这种方式的设计思路是: 组件由模板与元素组成,模板决定元素的位置,元素负责视觉及交互的配置。

元素指的是: 文字、图片、线条 ,它们是本系统的最小单元。

其拆解示例如下图:

商品组件由图片、文字元素及按钮组件组成,而按钮组件由线条元素及文字元素组成。

关于元素的拆解思路如下图:

通过这样的解构,元素的交叉组合能够形成不同样式的组件。

当业务方有新的特性需求,只需要迭代元素的属性, 一次迭代所有的组件都能够使用这个特性, 即避免重复开发也保证了其复用性。产品、研发及测试的工作量的也大大减少。

除了视觉配置,另一部分则是交互的配置,其拆解如下: 

最小单元在实际的设计过程中,还应权衡投入产出比, 不应为了解构而解构。

数据统计,有两点建议:定义清晰、数据独立。后者与系统架构有关,由于系统之间的相互依赖,会有关联的数据需要查询。

个人的经验是让系统尽量只消化系统本身的数据,对于关联的数据可以查询数据源让核心系统做整合,最粗糙的设计方式则是直接跳转至关联的系统查询。

1)角色与权限设计

根据组织架构以及权责范围,系统的使用角色所对应的权限也不同,常见的权限有增、删、改、查以及审批流。

2)版本计划

版本的计划。可以是对完整系统的分版本上线,也可以是对业务的预估推测系统后续需要延展的功能,这会非常影响系统的技术设计方案。

3)交互设计及文档撰写

随着业务认知的提升、技能的熟练,产品设计的能力可能会达到瓶颈 。 近期的想法是,面向价值设置需求优先级,不仅是企业、业务,还有支撑部门和自己。

以前喜欢做有难度的需求,但难度却不代表价值,我想好的产品设计一定能 帮助业务方带来可视、可观的数据成果。

给多方创造价值,才能够自上而下的推动跨部门协作,持续获得资源以及成长。

B端网页设计规范

感谢作者 :  Arche阿北      

后台产品设计规范

以下数值为参考,请结合特定产品灵活运用。

1. 页面布局

统一尺寸

据统计,目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话,向上适配或者向下适配误差会比较小。

适配方案:面向多个客户,后台产品设计功能型页面的尺寸统一为 1440*900,按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主,同时设计出极端情况(宽度为 1280 以及宽度为 1920)的效果图,力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统,由于各个职工电脑屏幕是统一采购、统一尺寸,所以开发适配的分辨率可以统一尺寸进行设计,这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可(提前和前端沟通好)。

页面框架

页面框架主要分为左右栏布局和上下栏布局,还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域,其中顶部菜单栏、左侧菜单栏为固定结构,右侧主体内容根据分辨率进行动态缩放;上下栏布局包括顶部菜单栏和主体内容两大区域,其中顶部菜单栏为固定结构,主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值;左右栏布局时,左侧菜单可收缩展开,收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列(1列=1宽度Column+1间隔Gutter)+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准,布局间相对间距可采用 8px 以及 8 的倍数,但一些小组件(按钮、间隔、输入框)可以以 4 为基准。栅格布局是为了辅助设计,灵活运用,不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称,大部分系统顶部栏高度 48+8n,侧边栏宽度  200+8n。我常用的是顶部栏高度 56px,侧边栏宽度 200px,侧边栏收缩状态宽度 56px,右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距,定义主体区域内各模块的边距及安全宽度,超出内容区域的部分采用区域内滚动或整屏滚动,视情况固定导航栏。

2. 标准色

颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求,可能也会将统计图、标签等进行统一标准色设定。

品牌色即产品主色,产品主色的设定直接影响产品气质和直观感受,也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取,尽量做好色彩的延伸性,可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

辅助色用于提示其他场景,比如成功、失败、警告、无效等。

中性色常用于文本、背景、边框、分割线等,需要考虑深色背景和浅色背景的差异,可以选择同一色相控制透明度变化,用来表现不同的层级结构。

其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

3. 标准字

后台系统常用的字体:windows 系统,中文 Microsoft YaHei,英文 Arial;Mac 字体,中文 PingFang SC,英文 Helvetica;除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。

行高设定,根据文字大小及使用场景设置行高,一般行高=文字大小+6px/8px。

4. 图标

图标是 UI 设计中重要组成部分,一般分为功能图标和应用图标,以图形的方式传达概念,可以降低理解成本,使得界面更加协调美观。在后台产品中,图标的功能则更偏向辅助性,辅助用户对功能的认识。

除了某些常用的图标,有一些专业性的操作和词汇则需要设计师进行绘制,现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制,画板 1024*1024,提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展,绘制完成后生成 svg 格式文件,提交到阿里巴巴矢量图标库的项目组里,方便前端调用,调整大小和颜色更为方便,且能够优化系统内存和性能。

5. 按钮

按钮是后台产品进行交互设计是重要元素,提供给用户进行点击操作,是视觉上最引人注目的控件,具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

按钮的交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸,大中小三个级别用在不同的场景,一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小,同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

6. 导航

导航的类型有很多种,常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可进行统一设定。

顶栏菜单多为一级菜单,点击切换,或作为下拉菜单的父级,将子级菜单合理分类。

侧栏菜单为垂直导航菜单,可以内嵌子菜单。

下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

步骤条引导用户按照流程来完成任务,一般步骤不得少于两步。

分页的高度设定为 24px、30px、32px,根据应用场景适当增减内容,比如设定每页展示数据的条数、跳转至指定页等。

面包屑用于说明层级结构,使用户明确当前所在位置,并且可以回到任一上级页面。

徽标数用来通知用户当前有未读消息,一般出现在图标的右上角或者跟在文字后面。

7. 表单

表单多由一条或多条列表项组成,单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式,比较适合 PC 端的使用;上下分布增加了表单的整体高度,视情况选择使用;无标题经常应用在登录注册,虽然减少了面积,但是增加了理解难度。

输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

输入框的尺寸可按照8的倍数进行设定,比如 24px、32px,也可根据系统实际情况进行设定,我常用的输入框高度为 30px,宽度视情况而定,无圆角。上下布局的多个输入框上下间距为 20px,有错误提示时候竖向增加 10px 或横向显示在输入框右侧(预留出位置)。

表单中标题文字左对齐,输入框左对齐,标题文字距离输入框20px(多个长度不同的输入框算最长的);标题文字右对齐,输入框左对齐,也是常用的方式。输入框内正文字体 14px,文字和左右两边边框的边距 10px。

选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形,复选框多为方形。

搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定,通常和输入框保持一致。搜索框距离右侧按钮 4px,内部文字 14px。

单选多选框尺寸 16*16px,多个选项横向排列间距 16px,纵向排列间距 8px。

开关按钮外框 40*20px,内部圆形 16*16px。

8. 表格

表格在后台产品 UI 设计中占比非常大,用来展示数据、统一管理、作为详情入口,是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围,同时也包括表格中的按钮样式、标签样式。

表格主要分为五大区域:选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框,为用户提供按需搜索,可以大大提高用户效率;操作区指各种对表格内容进行增删改查、批量处理、配置列的动作;表头展示列标题,一般具有排序功能;正文主要展示各种各样的数据,要注意行高、对齐、分割、信息层级等,要考虑是否提供行内操作;底栏显示分页、总数统计等。

表格信息一般主要功能为增删改查,查看和编辑是最基本的功能,表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

行高

表格行高可设置为表格内字体高度的 2~3 倍,主表格会间隔显示不同颜色,用于区分不同行数据、加强视觉流引导,展开单行的内置表格可采用纯色,选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

行数

表格行数太多加载速度会降低,延长用户等待时间;行数太少会导致用户不断翻页,降低使用效率。比较合适的默认表格行数是 20 或 50,用户可以根据自己需求选择默认的行数。设定行数之后,如果每页行数多于每屏行数,可在表格内引入滚动条,这时可以固定表头滚动内容。

列宽

列宽根据内容字段长短需要有不同且合理的默认值,使得表格字段有良好的展示效果。列内容的长度固定时,列宽应大于固定宽度(比如时间、MD5、SHA1);列内容不固定时,能预判最大宽度的按照最大宽度设定列宽(比如IP地址、MAC地址、姓名),不能预判最大宽度的设定列宽按照常用宽度,多于内容省略以「…」展示,鼠标悬停出现完整内容(比如详情、描述)。

列数

表格列不应过多,列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列,用户可自定义展示必需列以外的其他列;只展示重要信息,下拉展开列查看完整信息;在表格中引入横向滚动条,根据实际情况选择是否要始终固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。

对齐方式

表格内的文本应按照文本类型不同进行统一规范,如金额类数值保留相同位数小数,SHA1 虽然是一串数字但是其实那并不是数据而是一串编码,所以可以像文本一样左对齐。根据文本内容不同,对齐方式也应灵活调整,可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的,将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息,也可以根据产品需要在文本前面增加「复制」图标,方便用户调用。

详情入口

表格内部数据的详情入口,将能点击下钻查看详情的内容以不同颜色表示,同时在表格行最后一列操作按钮部分放置一个查看按钮。

9. 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框,区别是是否会打断用户工作流。

弹框又称对话框,是叠加在应用主窗口上的弹出式窗口,以对话的方式使用户参与进来。

弹框

弹框出现时,主题内容增加一层遮罩 #000,透明度 50%,避免使用双层弹框,可同时采用有关闭图标的弹框和无关闭图标的弹框,引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭, 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框,或者再次进行交互梳理。

侧滑框

侧滑框又称抽屉,出现在右侧,固定宽度 400px,高度覆盖在主题内容之上,点击侧滑框以外的区域则收起侧滑框。

骨架屏

为某些特定数据提供数据加载等待时的占位图形组合。

全局提示

建议停留时间 3s,可根据文字字数调整停留时间,文字内容限制在 30 以内。

警告提示

用不同颜色和样式展示需要关注的信息。

通知提醒

消息通知和警告信息用通知提醒框,单个消息从页面右侧以抽屉的方式划出,用户可手动关闭,或停留 3s 后自动关闭。

10. 缺省状态

绘制不同类型的情感化插画表示缺省状态,如404、500、暂时没有数据、没有新消息等。

页面需要一个默认的底色,错误文字使用 14px,与情感化插画间距 20px,与按钮间距 30px。

11. 数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分,使用情境为各类统计图、大屏展示页面等。

功能型页面的数据可视化可以引入图形化设计组件,Echarts、G2、d3等;展示型页面的数据可视化则可以做得更有趣,比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

考虑到数据可视化可能会需要深色浅色不同的背景,在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

怎样去做一个网站的效果图呢?求详细。。。

做一个不但在于技术精还要在于设计理念有创意,所以如何设计好一个效果图要从多方面去考虑,首先从你的需求方面去想去设计(即页面内容),之后根据企业VI去定位页面布局及颜色等等方面,最后根据布局再去用技术方面的东西去设计。既然你只是说如何布局,那么根据经验来说,应该从以下几方面考虑。

一).确定页面功能模块

首页的内容模块是指你需要在页面上实现的主要内容和功能。一般的站点都需要这样一些模块:

网站名称(logo), 广告条(banner), 主菜单(menu),

新闻(what‘s new), 搜索(search), 友情链接(links),

邮件列表(maillist),计数器(count), 版权(copyright).

(当然这些只是常用而已。一般情况下,如果是企业设计一个网站的话,都会有网站设计方案,那么可以根据方案去设计的。)

二).设计首页的版面

在功能模块确定后,开始设计首页的版面。就象搭积木,每个模块是一个单位积木,如何拼搭出一座漂亮的房子,就看你的创意和想象力了。设计版面的最好方法是:找一张白纸,一支笔,先将你理想中的草图勾勒出来,然后再用网页制作软件实现。

1.定位你的网站主题和名称

2.定位你的网站CI形象

3.确定你的栏目和版块

4.网站的整体风格创意设计

5.网站的层次结构和链接结构

6.首页的设计

7.版面布局的窍门

8.色彩的搭配

其实说来说去就是颜色搭配问题及图片布局,一般一个网站效果图都只是一个静态的页面而已,要图片格式的话,直接截个图就行了。所以只要知道布局及颜色搭配再就是懂设计技术基本上就可以做一个效果图了。当然你自己感觉创意不够的话,一般可以同过网络去搜索一下网站模板,可以去借鉴别人的设计风格之后在根据自己的要求加以修改就ok了,有很多是PS格式个模板,那么就可以在ps里面先修改在通过切片工具做都是可以的。这些需要一定的设计技术了。

根据楼主说提问的问题来看应该不太懂网页设计,所以最好去下载一个网页模板,百度里搜索有很多下载网站,之后看点网页制作教程就可以了做了。一下是一些相关资料,如果链接过期请自行搜索

网页模板下载地址:

网页设计教程:

想知道一个网站的首页效果图制作的基本过程

在网页效果图的设计阶段,应按照绘制结构草图,在Fireworks中绘制辅助线、绘制结构底图、添加内容、对效果图进行切片、对切片进行优化、输出切片刀Dreamweaver的顺序来依次进行。下面将会介绍网页效果图设计中各个流程的作用。

在图像软件中设计网页效果图,总体可以分为7个步骤:(1)、创建画布,添加辅助线来布局;(2)、绘制结构底图;(3)、添加内容,包括图像和文字;(4)、切片;(5)、优化;(6)、导出;(7)、布局。

1、创建辅助线

在具体设计前,应当考虑到网页的布局形式,可以根据策划阶段确定下来的网页布局草图,在Fireworks的画布中添加辅助线,这样做的目的是为了明确页面布局形式和面积。

需要注意的是,对于布局结构比较复杂的页面,辅助线不是一次就能够全部创建好的,而是一部分内容创建一部分否则辅助线过多会使页面混乱。

2、绘制结构底图

根据创建好的辅助线,使用Fireworks的工具或者是矩形选取框工具,把网页效果图中带有底色的“矩形块”依次绘制出来,形成一个整体的布局效果。

这里的“矩形块‘只是一个统称,可以使任意的形状。除了得到形状以外,还可以直接对这些”矩形块“配色,或添加纹理、滤镜,从而在整体上对页面的配色方案进行控制。

3、添加内容

结构底图绘制完毕后,就可以开始在网页效果图中添加实际的内容了,包括文字和图像,从而完成最终的效果图方案。

添加图像的时候,如何选择最合适的图像素材,如何对图像素材进行处理是非常重要的,可以说网页中图像设计的好坏,直接影响到整体的页面效果。

4、切片

效果图制作完毕后,首先需要进行切片。把网页比喻成一幅图,而切片工具就像是剪刀,使用切片工具可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为IE浏览器是多线程的,同一时间可以下载3幅图像。

切片的另外一个目的,也是最主要的目的是为了布局的需要。很多人不知道该如何对效果图进行切片,这是因为对布局技术不了解。同一个网页效果图,按不同的方式布局就会得到不同的切片,并没有说哪一个才是”标准”的,所以要想灵活运用切片,必须熟悉流行的布局技术。

如何设计B端产品的总览

大家如何设计B端产品的首页,本文参考了腾讯云与阿里云的首页设计,但这两种产品的设计,都是基于商业化产品的设计目的,我做的平台是工具平台,持续作用于内部,并没有商业化的计划,所以本文主要介绍工具平台的首页设计。

如何设计首页,我查了众多资料,发现市场上大多是介绍C端的产品主页,对b端产品的介绍比较少,所以本文计划以首页设计的形式,首页的内容指标,分角色、分不同权限的使用差别来介绍。

设计之前,先统一一个核心价值,首页设计不是我们的首页,不是展示品牌的首页,而是设计给用户看的,为了更直接有效的触达用户,为了给用户提供更高效的工作效率和降低他的工作成本。

如何设计,考虑到产品的设计,需要对用户进行访谈,了解用户的使用场景,分析用户对平台的期望。

产品门面的角度而言,首页可以作为一个数据平台,从产品价值与效率的角度来讲,首页可以作为一个工作台,产品业务架构的角度来讲,首页可以作为一个对导航页的补充。

一些设计首页的原则

首页尽量只占一屏,不要有滚动条

首页的设计核心是帮助角色快速触达业务

设计首页的内容板块时,最好要有内容标题,复杂内容要有tips提示

首页更加适合以图表格式展示,

首页上半部门一般显示数据,下半部门一般展示快捷功能和功能导航,

一般进行设计时,尽量聚焦到角色的日常工作中。

产品首页的常用设计板块主要包括几个点:数据展示、图表内容展示、功能导航、快捷功能、个人信息、内容包括资讯和通知信息。

数据展示

数据一般是公司管理层比较关注的业务运营数据和公司管理数据,数据展示时,数据相对独立时,一般采用图标加文字的方式,数据较多时,一般采用折线图,一定要选择符合数据特征的图像。

内容展示

内容一般包括资讯和通知信息和公告,一般展示在首页。

功能导航

一些高频使用的功能可以考虑使用在首页,设计方式以图标为准。

个人信息

一般设置在导航栏

快捷功能台

设计的目标是要用户快速触达功能和业务,提升用户的效率,该功能的设计不宜复杂,操作可以在工作台完成即可,尽可能简化设计。

视觉

保持整洁和简单即可,与整体导航风格保持一致,不能抢占导航的视觉中心。

再次重申,首页设计的意义是提高角色的效率,使客户快速触达业务。

关于b端网站设计效果图和b端产品设计首页的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫码二维码