首页

设计方法论-高阶UI设计师如何运用5WH分析设计需求

资深UI设计者

用科学的方法武装自己 让自己的设计更有发言权

 

B端基础 | 52000余字总结 B 端基础设计知识

前端达人

缘起
最近看汪曾祺的《叹息桥》中的一句话,我必须分享给你。缘起我在人群中看见你,缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
 
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
 
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
 
1、
内容总结
因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
1.1、登陆页面
 
最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
登陆页面:布局分为三种;居左、居右、居中
页面元素:导航、登录框、背景(装饰元素)、互联网信息。
导航
高度:68px或48px、文字大小:14(大部分)16(也可以)
登录框
大小:大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。
登录方式:扫码、手机号、账号、第三方
标题切换字号:我喜欢用26px(也要其他的16、/18、/20)
输入框高度:48px
按钮文字和高度:16px、和输入框高度一直就行。
背景
可以是配的插画(这种最简单)、一般都是科技风
底部
要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。
 
1.2、筛选
 
筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
筛选的意义:定位数据、缩短查询路径、数据内容分类
 
筛选类型:基础筛选组件(就是我们常见的页面顶部的筛选)、高级筛选(就是那些需要你定义想一想的筛选部分)
 
筛选布局:顶部和左侧
 
筛选样式:平铺;折叠;Tab筛选;单侧选择;表头;综合
 
1.3、栅格
 
这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
怎么用:直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。
 
注意点:不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px
 
1.4、颜色
 
这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
主色确定:常见的方法、1、用自己品牌logo的颜色;2、用行业色
 
配色确定:我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。
 
大厂色彩:这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。
 
1.5、字体
 
字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定
B端基础 | 52000余字总结 B 端基础设计知识
 
 
中国文字:这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。
 
字体规范:我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。
 
字号:最新的字体12px、正文、14px、通过+2, +4,+8,+12,+16 的步数增长规律
 
行高:通过逻辑得到这样一个公式:「 行高 = 字号 + n 」,8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「line-height = font size+8」
 
字重(就是字粗):建议使用两种常规和加粗(在前端里一般就是400和500)
 
颜色:我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则,制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合,文字显示色彩对比满足至少1:4.5( AA级别)。且验证了其中的实用性,共分为亮暗两种模式,4 个色阶。
 
1.6、ICON(图标)
 
你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
设计原则:准确、简单、节奏、愉悦。
 
设计实战:采用栅格
我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用
 
ICON分类:交互性图标、装饰性图标、说明性图标
 
1.7、按钮
 
按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
常规按钮:次要按钮、主要按钮、文字按钮、图标按钮
 
按钮状态:可用、禁用、加载、悬浮
 
尺寸:把按钮分成:迷你、小、中、大,四种尺寸。高度分别为:24px/28px/32px/36px。推荐及默认为尺寸「中」。
 
样式:各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
 
 
布局:这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。
 
1.8、弹窗
 
后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。
 
我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。
 
1.9、表单
 
什么是表单:我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。
 
表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。
 
表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。
 
1.10、表格
 
B端设计中,对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中,内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
 
表格的类型:基础表格、树形、子表格、交叉表格、图表表格、卡片表格
 
表格的样式:网格型、水平线型、斑马纹、自由形式
 
进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。
 
1.11、大厂规范
 
如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。
 
2、计划
 
这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
 
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
 
3、写在最后
 
分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING(国王)
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
新的开始见.......
 
注解:标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。
 
 
 
 
 


作者:彪形大汉pro
链接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

潮流风格平面设计案例

前端达人

今天给大家分享一张潮流风格平面设计案列的,我们先来看下效果:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
潮流风格的定义,一个是颜色用黑色绿绿两种颜色形成强烈的单色对比形成潮流感。
 
另一个就是潮流图形的使用比如:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
接下来我们就分享一下步骤,看看一步一步是怎么做出来的。
 
 
1.制作背景
先填充一个绿色,然后加入一个纸张纹理:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
得到以下的效果:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
绘制纹理,用一个图形圈定选区,然后用波点笔刷刷出纹理:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
得到以下效果:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
我们的背景就制作好勒。
 
 
 
2.中间层制作
用矩形工具绘制一个矩形在画面中心,四周留出一圈间距:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
使用一张素材图叠加到矩形区域,使用正片叠底模式加去色使其变成背白:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
给黑色的矩形区域整体加上一层波点纹理,让其更富有质感:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
 
 
 
 
3.增加图形和信息
使用好看的英文排版在左边空白区域,两个相同的英文一个是实心的白色,另一个采用描边的样式,这样可以看起来更有变化:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
在英文字体之间用一个线条穿插起来:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
在右边的人物叠图之前用矩形工具画一些线框:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
 
 
 
 
 
4.丰富排版
在画面四周空白的区域增加一些细节排版,把画面铺满:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
 
 
 
 
5.制作点缀物
标签:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
纸质卡片:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
星星图形制作:
 
直接使用多边形工具,参数如下:
 
边数:4,圆角半径:0,星形比列:1%,勾选平滑星形缩进:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
然后把我们做好的几个图形排列到画面当中画好的矩形框里:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
最后在右边空白的大框里放上一个LOGO或者图形,我们的最终画面就完成了!看看最终效果:
我是真没想到,大厂设计师把潮流风格做成这样!!!
 
 
这种潮流排版的设计,其实比较主要的就是颜色和图形,颜色不宜过多,黑色是万年不变的主要颜色,黑色配任意一种单色都会有很不错的效果。
 
 
其次就是咱们的点缀和图形的使用了,一般就是英文,星星,镭射卡片这些东西,多找找参考也很容易做。
 
 
当然,要想做的很好的话,还有很多细节需要注意,比如字体大小,间距,画面的比例等等细节多注意考量,希望对大家有帮助。
 
 


作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTYyMTYwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

深度解析体验设计_从了解到运用

ui设计分享达人

用户体验并不是指一件产品本身是如何工作的,用户体验是指“产品如何与外界发生联系并发挥作用”,也就是人们如何“接触”和“使用”它。当人们询问你的某个产品或服务时,他们问的是使用的体验。它用起来难不难?是不是很容易学会? 使用起来感觉如何?
“用户体验”是全链路的,绝不仅仅止于外观,不是说你把页面设计得好看、icon画得逼真就是一个好的体验。它不仅包含“框架层”和“表现层”,还包含着战略层(我们想得到什么和用户能得到什么) 、范围层(我们做什么和不做什么) 、结构层 (信息怎么归纳更合理)。

数据驱动价值-你需要掌握的数据分析技巧

ui设计分享达人

在这个信息爆炸的时代,数据已经成为了一种新的能源。数据分析能力的高低,直接影响到我们在职场中的竞争力。数据作为一个定量的维度,可以支持设计方案的推导和决策,以及对方案效果的验证。想要证明你的设计,数据是最直观的展现,掌握一些数据分析方法,能有效量化你出色的设计。接下来让我们对数据分析的整体框架、数据如何处理加工做一探究竟吧。

互联网产品设计的6个创新方法

ui设计分享达人

设计是为了解决问题,然而并不是所有问题都存在现有的解决方案。这时,创新的出现能够打破僵局,赋予设计新的生命力,用更加独特的思维方式来解决问题。不过,创新又经常虚无缥缈,尽管苦思冥想也难等到灵光乍现。
 

深入探究B端产品设计的核心

ui设计分享达人

一、B端用户需求的深入理解和分析
在当今高度信息化的商业环境中,B端产品已成为企业高效运营和持续发展的关键支撑。
这些产品不仅提供工具和服务,更是企业优化流程、提升工作效率和竞争力的有力武器。然而,要打造一款成功的B端产品,关键在于对
B端用户需求的深入理解与分析。
B端用户,
如企业决策者、团队管理者和专业人员以及普通员工,他们在日常工作中处理复杂的业务流程,对数据分析、系统整合、安全性等方面有着极高的要求。
这些用户的独特需求不仅体现在产品的基本功能上,更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

漫谈UI设计中的图标设计

资深UI设计者

在UI设计中,图标的使用可以说是占了大壁江山,相信大家都知道图标的重要性,一个优秀的图标比语言更吸引眼球更可视化,甚至跨越了语言的障碍,传递信息也非常的高效。

关于 UI 中的投影,我从原理给你讲起

资深UI设计者

在如今的界面设计中,投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿,都可以看见各种各样的投影样式。

UI场景中的极光风设计趋势

资深UI设计者

作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档