ui界面怎么做(ui界面设计流程)

本文目录
ui界面设计流程
ui界面设计流程
导语:其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受,拉近人与商品的距离,是建立在科学性之上的艺术设计。下面就由我为大家介绍一下ui界面设计流程,希望对大家有所帮助!
一、确认目标用户
在UI设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
二、采集目标用户的习惯交互方式
不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。
当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
三、提示和引导用户
软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。
四、一致性原则
设计目标一致
软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。
元素外观一致
交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
交互行为一致
在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。
对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的’确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。
五、可用性原则
可理解
软件要为用户使用,用户必须可以理解软件各元素对应的功能。
如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。
比如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。
可达到
用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。
要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。
可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)
可控制
软件的交互流程,用户可以控制。
功能的执行流程,用户可以控制。
如果确实无法提供控制,则用能为目标用户理解的方式提示用户。
;如何做一个好的UI设计
第一、首先我们应该了解UI设计师什么?
UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网常用的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。UI设计的主要工作内容分为平面设计、网页设计、电商设计、APP界面设计等等。
第二、要了解UI设计平时做哪些工作?
1、 UI设计师主要工作:APP界面设计、电脑端网页界面设计、小程序界面设计等;
2、电商设计师主要工作:线上店铺店铺首页、宝贝详情页、活动专题页面,店铺产品精修等;
3、平面设计师主要工作:手绘插画设计、企业logo设计、产品包装设计、线上活动广告图设计、H5活动页面设计等 ;
4、APP界面设计,打开手机,看到的各个APP。APP的图标,点开图标的启动页面,打开后看到的界面,都是UI设计师做的;
5、电脑端网页界面设计,打开电脑端某个网站,我们看到的整个网页界面,也是UI设计师做的;
6、小程序界面设计;
7、活动海报设计:比如公司的节日,或者做活动宣传,都需要活动海报,也是由UI设计师做的;
第三、我们来看看UI设计需要学习哪些内容?
1、设计软件的操作 软件 UI设计师使用频率比较高的软件有PS、Ai、 Sketch等设计软件,其中PS的应用范围更广的操作能力是一个设计师入行的基础。作为最基本的设计应用技能。UI设计师不仅要了解这些软件、学会这些软件,还要合理运用,利用好这些设计的辅助工具。。其他软件也分别有各自的用途。多种软件的操作使得设计的工作更加方便快捷。
2、插画绘制的能力 在设计师的知识和技法中,插画绘制也是比较重要的一点。插画作为设计作品中比较常用的一部分,起到了一定的作用。好的插画可以让用户感到亲切和愉悦,提升用户对产品的好感度,有利于产品的推广。
3、品牌设计的思维 设计其实是一种信息传递的媒介。UI设计师在为品牌做设计的时候,就要注重表达出品牌的理念,服务价值等信息,还要保留品牌原有的特质,让人眼前一亮,而不是和同行业的品牌混淆。
4、运营能力的提升 作为UI设计师,界面设计是不可或缺的。网页、banner、专题页等,不要以为设计师和运营、营销没有关系,恰恰相反,如果只考虑视觉效果而忽略用户反映的真实数据,这样的设计在业界显然是不可行的。
5、产品方向的考量 UI设计师除了要在设计上达到让客户觉得舒适、好看,也要在产品方向有所考量,即要符合产品的定位、符合用户体验和商业价值等方面。这需要设计师现在客户的角度,不断体验产品。
ui设计界面怎么设计
ui设计界面怎么设计?ui设计的工作目标是使用户界面简洁,易于使用。因此,我们应该将用户视为设计的中心和出发点。界面的可用性对于应用程序的复杂性也起着重要作用。为了确定一个用户界面应该是什么样子,你应该使用什么功能,你应该从哪些方面优化可用性。如果您想要了解更多关于如何优化用户界面的细节,那么这里是一个很好的参考资料。为了确定一个用户界面应该是什么样子,你应该使用什么功能,你应该使用什么方面优化可用性。如果您想要了解更多关于如何优化用户界面细节的设计技巧,请阅读本文的一些特定指南。优化设比在优化设计以获取更多信息的同时,还将帮助您了解正在使用的设计方面,以及您在使用过程中需要避免的一些问题。
如何做出优秀的UI界面
一个好的交互设计对产品的成功起着很关键的作用
UI所做的就是用户最先接触到的东西,也是一般性的用户唯一接触到的东西
用户对于界面视觉效果和软件操作方式的易用性的关心,要远远大于他对底层到底用什么样的代码去实现的关心
如果说程序是一个人的肌肉和骨骼,那么UI设计就是人的外貌和品格!都是一个成功软件产品必不可少的重要组成部分!对我而言程序懂得不多所以只是从UI设计与软件产品整体的关系和如何才能使软件产品得到最佳的UI设计角度来谈
我们现有的开发流程一般都是由市场部门提出客户需求,产品设计人员提出产品设计报告,开发部门设计开发计划,由各个小组分别开发一个模块,最后整合成为一个完整的软件产品
在这些流程之间UI设计应该参与那一个部分,每一个部分应该做到什么地步才可以使产品得到最好的UI设计效果呢下面我们会在每一个部分具体分析
首先分析一下现在的问题所在,在一些软件业比较发达的国家软件产品的UI设计过程贯穿了软件开发的自始至终,而且是必不可少的
而在中国产品UI设计并没有被广泛接受,就算是已经有了UI设计师的一些企业也没有对产品的UI有着足够的重视,一般来讲他们大都会把重点放在如何使用代码实现所需要的功能,在我看来这只是一个成功软件产品的一个部分
一个优秀软件产品的开发过程应该是由四个部分组成:1
软件产品的设计(业务建模)2
系统的设计(技术建模)3
分单元的开发(把软件各个部分拆分分单元编写代码)4
测试(分为单元测试、系统集成测试和产品功能测试),这些是由软件研发部门做的工作
除去以上软件开发过程的四个部分还有用户需求和用户验收测试,这两个过程是由市场部门和产品用户一起完成
所以说用代码实现产品功能(coding过程)只是软件开发的一个步骤
现在我们回到UI设计的角度来看,作为UI设计人员我们需要全程参与到软件开发过程中,而不只是在某一个步骤参与,现在在大多数软件企业里UI设计师只是在产品的coding过程的时候才实质性的参与到软件开发过程里,而在其它几个步骤里只是参加甚至根本没有参加(在这里我要强调“参与”和“参加”是两个词的不同概念,“参与”指的是完全加入到开发行列开始进入设计阶段,而“参加”指的只是旁听会议或者提出一些简单的意见并没有开始进入设计阶段),这样就会大大降低软件产品的开发效率使开发成本成倍上升甚至导致整个产品的不成功!这并不是危言耸听,下面我们分析一下在一个软件产品的开发过程中UI设计应该怎么做、做到什么地步才能避免上边提到的那些问题下面我会根据软件开发的过程解释上边的问题,刚才我提过软件开发过程的几个步骤:1
产品建模2
技术建模3
分模块开发4
测试,那么我们也分为这四个部分进行讨论:一
在此我需要简单的提一下如果想要深入研究可以看一些有关于产品优化的书籍甚至是心理学的书籍,有很多人认为软件的优化就是代码的优化(用最少的代码实现产品功能),在我看来这只是程序的优化是针对程序员而言的而不是整个软件产品的优化,产品优化包含了交互设计在现在的多数软件企业没有专门做这一部分的交互设计师所以往往这一部分被忽略,我认为这一部分应该又UI设计师承担起来,从文章的开头我就说过UI设计不只是图形界面的设计,就算是有企业里边有这样的优化人员或者交互设计师他们也要和UI设计师一起配合完成产品交互设计,作为UI设计师产品的交互性和易用性是在做设计的时候必须考虑的!言归正传,产品设计人员经常不会过多考虑简单易用原理也就是产品出来用什么样的组合形式体现给用户,这也是UI设计师考虑最多的事情,所以UI设计师一定要在产品建模期间参与设计,给产品设计师一些意见
作为一名优秀的UI设计师我们还要在了解了产品的需求之后更深入了解这个产品的使用环境和用户群体的使用习惯
我们还需要了解市场上的同类软件产品的设计方案,研究他们的优缺点,以便在我们设计的时候吸取它们的长处避免它们的错误
在产品建模之后一般的都会由产品设计人员给客户做一次功能设计讲解,往往这样的讲解只是文字性质的需要让客户想象着理解,这就会造成很大的隐患有的客户根本无法理解你的讲解甚至对这样的讲解根本不认真听,因为他们根本不懂,在讨论过程中他们经常会同意产品设计人员的一切设计想法但是产品测试的时候他们又会提出种种不满意,我想这是一般的软件公司都会遇到的也是最最头疼的事情,但这并不能怪客户我说过客户只会关心视觉效果和软件的操作而并不会去关心我们是怎么实现这一切的
这种情况带来的直接后果就是产品的反复修改开发成本成倍上升,怎么避免呢这就要靠UI设计师了,俗话说“眼见为实,耳听为虚”,所以需要UI设计师做出一个产品整体效果的demo
这个demo用图片的形式表现就可以,我们只需要将要体现的产品界面做一个拼凑就可以了,因为这并不是产品的最后样子,只是协助产品设计人员给客户讲解产品设计
产品建模时期UI设计师要了解客户的要求想法和产品设计人员对产品功能的要求深入了解产品,采集用户的使用需求、使用环境和使用习惯,了解市场同类产品的设计分析它们的优缺点
协助产品设计人员完成产品建模过程并制作产品展示demo模拟用户对主要功能的操作过程和界面呈现,生成交互原型(基本上产品的交互性和易用性问题都需要在产品建模的时期解决)
如果时间允许我们甚至可以提出一份“UI设计分析报告”,这份报告可以附在产品设计说明后,更有效的帮助客户了解我们的产品设计并且帮助开发人员更好的遵循UI的整体要求来完成开发工作
这个时期的关键是“交互设计”
二
技术建模时期:在这个时期作为UI设计师我们已经了解了软件产品的功能需求并且拿到了一份产品设计人员的产品设计说明,可以进入界面样式的设计过程了
有些客户会要求产品遵循一个整体的VI设计标准,那么我们就需要按照一个整体的已定的风格去设计软件的界面,要与客户公司的企业形象吻合
在这个时期软件的UI设计进入到了美术设计阶段,我们需要制定整个软件的风格,塑造软件的整体形象,并且具体的描述每一个界面中的元素和布局、文字字体等信息
在这个阶段我也不应过多的说什么,主要是每个UI设计师各自发挥你们的艺术专长用最简洁、最漂亮的界面表现软件产品
需要注意的就是在我们设计整体风格的时候一定要深入了解这个产品的理念,看看它是干什么用的
不同的产品要有不同的风格,这里边有很多的细节注意,不同的产品、同类的产品不同的内容、不同的传播介质,这些都会决定UI设计的风格
1
不同的产品:比如一个游戏产品就需要将界面做的花哨一些或者用大的图片充斥;如果要是一个应用软件就需要突出使用方便和强大的功能设计要简洁
2
同类不同的内容:比如一个可爱的游戏产品(像是卡通类游戏)就需要将界面做的活泼生动可爱一点;如果是一个角色扮演的战斗类游戏(像是枪战闯关类游戏)就要做的酷一点深沉一些
3
不同的传播介质:我们要做的软件产品有的需要在网络上传播那么就需要我们考虑到网络速度的问题;有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨的效果
所以说不同的产品还需要单独考虑,这也需要UI设计师多多了解产品,保持与客户交流
还需要重点注意的就是我们在做图形化设计的过程中千万要贯彻在前一个阶段做好的交互设计,始终注意产品的交互性和易用性
在设计过程中我们一定要做出每种结构每一个步骤的效果图,不能只提供图标、按钮、背景图等图片,这样的话程序员根本不知道往那放这些东西,在这个时期我们就要最终确定软件界面的呈现形式
技术建模一般是由高级程序员完成的,他们会将整个软件开发分为一个一个功能模块,分配给一个一个的开发小组
有时候我们还需要根据客户或者产品的特定需求做一些延伸性的设计(也叫UI产品设计的外延),包括:软件的安装导航界面、产品的演示宣传动画、一些附带的桌面壁纸或者屏幕保护、代表软件的卡通小精灵、有时还会被要求设计软件的logo和广告banner等等
技术建模时期的关键是“风格和界面设计”
三
分模块开发时期:这个时期软件开发过程进入实现阶段,也是需要人力最多的时期,这样就会分散UI设计师的精力
软件会被切分为若干个小的模块进行代码编写,最后整合成一个完整的软件产品
对于一个程序员来讲他们大多根本不会考虑到产品应该是什么样子应该有什么整体风格,他们所考虑的只是如何用代码实现设计的要求,而且在现在的软件企业多都实现了模块的复用,这样会大大节约人力成本,那么程序员只是对原有模板进行修改使之适应新的软件产品,这样就会对UI设计的最终贯彻和实现带来很大的麻烦
做出的每一个模块虽然已经能够使用但是都是“各自为政”没有统一,因此我们也需要主动的协助和监督程序员完整的实现UI设计的要求,如果有技术无法实现的问题需要及时沟通改正设计方案
有的时候有些模块需要有单独的风格,比如一些已有的软件产品需要集合到某一个新的产品中去,这样就会加大了设计师的设计难度,我们必须要在保证产品整体风格不变的情况下将原有产品的设计风格集合进去,使之更加适合新的产品表现形式
如果我们仍旧保持原有产品的风格那么当各个模块集合起来之后往往会使新的产品感觉很松散,进入每一个功能都会觉得是另外一个软件,使人对软件的印象不深刻
在这个阶段我们还是要主动一些,跟进各个模块界面的实现
现在很多软件企业都存在很多UI设计师和程序员的协作问题,不是程序员做不到UI设计的要求,就是UI设计师坚持一些自己的想法不能改动,还有的时候经常会有人过来没头没尾的说帮我做点东西吧!当软件集成到一起再一看,就是很多不同风格的东西堆砌到一起,从头到尾都不舒服,领导或者客户看了以后极度不满狂批一阵,最后得出结果UI设计做的不到位
有人说UI设计师就要背着软件不成功的黑锅,因为人们根本看不见代码怎么写的,功能是怎么实现的,他们只知道对软件的样子和使用进行
让一个用户一个软件他们只会说这个软件好用看上去也不错挺漂亮的,但是做为一个普通用户决不会有人说这个软件程序写的不错
这么一看我们会联想到现在软件开发之中主要的冲突在UI设计师和程序员之间,其实这只是表面的表现形式
实质上这个现象体现了现在软件企业的一个通病就是这个开发组之间的协作关系混乱,程序员和UI设计师之间是平级协作关系,程序员是不会对产品负责的,这样看来UI设计师只应该听项目经理的,无论对设计做什么样的改动或者增添什么样的东西,都应该由开发项目经理和产品经理协商之后决定,只有他们可以对最终的产品负责
这样也可以避免很多程序员和UI设计师之间的争执和矛盾
但是现在大多说软件企业的产品经理和开发项目经理没有做到这一点,他们也根本不了解UI设计师和程序员的工作,也无法把握他们的工作量,这样无序的管理会造成很麻烦的后果
其实可以建立一些合理的流程管理制度,就算企业没有作为UI设计师也可以自己起草一份适合自己和企业的“UI设计需求申请单”,里边应该列出我们需要的“输入”内容、工作时间、最终的“输出”结果等等栏目(可以自己根据要求灵活决定)
这样形成一个有参与人、有依据、有存底的工作流程,出现问题或者争执的时候我们有据可依,这只是一个习惯性的东西因不同的企业而议不一定都要建立需求单
在分模块开发时期UI设计师应该做的是,在模块开发的前期做出产品每个模块的效果demo(可以用图片的形式表现)要求程序员按照demo的样式进行模块开发,协助和监督程序员严格按照UI设计要求生成最终产品,把握各个模块的统一,经常了解程序员的工作进展及时对不合理或者难以实现的设计进行讨论设计出新的方案
分模块开发时期的关键是“协助和监督程序员生成最终产品”
四
测试时期的输入和输出:软件产品的测试会分为三个测试阶段,第一个是分模块开发完成之后每一个模块进行的单元测试;第二个是将各个单元集成为一个整体的产品进行集成测试;第三个就是整个产品在交付使用前进行的整体测试
在测试过程中UI设计师的任务相对会轻松一些,我们只需要跟着测试人员走几遍流程,如果在其中发现没有按照UI设计要求的部分及时要求改正就好了
我们还会经常遇到客户在测试过程中突然觉得那里不合适需要修改,这也是最最头疼的事情了,有的时候他们说的并不一定对,只要我们设计的每一个步骤都有一定的道理能够说服他们就一切ok了
如果他们执意要修改设计方案,那么我们没办法只能按照客户需求修改
但是如果前边按照本文的流程走下来我想这样的可能性不大就算是修改也不会是大动干戈
在修改过程中我们还是需要先做出效果图,让客户确定再具体实施,这样也会避免很多麻烦的
测试时期的关键是“检查整个产品发现问题及时改正”
如今软件的越来越多的考虑到人的因素,“以人为本”的设计理念贯穿了整个软件产品开发的始终,因此软件产品的UI设计过程最重要的两个部分就是行为和构造,也就是交互设计和界面设计
上面我们按照软件开发的四个阶段,逐个的分析了每个时期UI设计的任务
由此我们可以看出UI设计并不完全是一个美术设计的过程,还有很重要的一个部分就是交互性和易用性的设计
我们要时刻把自己放在软件的用户角度来考虑,设计出最简单易用,界面友好的软件产品
善于使用继承,让美工团队去设计窗体的界面,程序团队只去实现窗体功能
一个完整的UI设计流程是怎样的
UI设计流程是:
一、确认目标用户
在UI设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
二、采集目标用户的习惯交互方式
不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
三、提示和引导用户
软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。
四、一致性原则
进行UI设计的过程中要达到以下几个一致性原则:设计目标一致、元素外观一致、交互行为一致。
五、可用性原则
可理解:软件要为用户使用,用户必须可以理解软件各元素对应的功能。
可达到:用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
可控制:软件的交互流程,用户可以控制。功能的执行流程,用户可以控制。
扩展资料:
UI设计的关键属性
1、简单
优秀的UI界面是隐形的,华丽的装饰和不必要的元素都已经被剔除,简单直接的页面逻辑和直观必要的元素构成了这样的UI界面。
2、清晰
清晰应该是所有UI界面都具备的基本属性。UI界面存在的目的是让用户能够更便捷地同系统进行交互,为此,它需要能够清晰地同用户进行沟通,如果用户无法弄明白界面的使用,会因此感到沮丧。
3、熟悉
用户对UI界面抱有熟悉感的时候,通常意味着他们对于这个设计有所了解,甚至知道怎么交互,他们明白操作之后大概会发生什么,也知道哪些事情不应该做。所以,如果能利用好用户对于交互和界面模式的熟悉来进行设计的话,能让用户更快上手操作。
4、响应
事实上,如果网站没有在3秒内加载完成,就会开始有访客因此而流失。根据Kissmetrics的统计,超过40%的访客会在加载速度超过3s之后而离开,而加载时长的增加,更多的用户会随之离去。界面的合理响应让UI更为富有人性,减少错误的发生,并且让交互进入真正良性的循环。
怎么设置ui界面
1、个性化自定义界面设置先打开3dmax软件,打开自定义-加载自定义用户界面方案
2、打开内置以有的UI,里面有好几种以经设置好的。里面有好几种,可以根据自己的喜爱设定。
3、这时以经改变了界面的颜色和版试。
4、在左下角可以设置版面的排版方式
5、这样版面的排版以改变
6、打开自定义-自定义用户界面,背景视口,在这里可以修改颜色。
如何创建精致的UI界面(一):排版篇
从本周开始,接下来时间里,会和大家分享如何创建精致的UI界面,共五部曲,为什么要做这个分享?
曾经我学习UI设计时,网上资料很多,但是参差不齐,对于新人而言,这是很痛苦的,进步慢。因此我想通过之前踩过一些坑,集合自己的工作经验,把一些知识点分享出来。
分享的最终目的是沉淀自己,同时也希望能给有想要提升排版能力的设计师带来一些帮助与启发!所以本系列文章并不一定适合所有人。
那么本周就先从排版篇幅开启……
排版是界面设计中最难的部分,也是非常重要的一部分,它以各种形式存在界面中,纯文本排版,图形文排版,图片文本排版等等,这是我们在做设计时候,经常会面临的问题。好的排版能有效地向用户传递关键的信息,同时也能提升产品使用体验。
在我们日常生活中,离不开设计排版,包括经常见到的各种广告与电影宣传海报,如果不能让用户在短时间内记住关键信息,这个设计就是失败的。因此我希望通过今天这篇文章,能够让你对排版有一些新的认识。
在界面设计中,影响排版设计的因素有很多,我总结归纳了7个维度(当然还有其他更细的,在这里就先暂时不讲),它直接影响整个排版质量,这些方法当然不是绝对,但是如果能巧妙综合得运用到界面中,能保证大部分界面设计感得以提升,当然也是需要不断刻意练习来提高的。
分别是:
下面我会集合一些案例来和大家讲解下
空间即我们常说的留白,当设计元素紧紧地聚集在一起时,界面看起来没有重点,因此需要和谐的运用它,空间的运用规则直接影响产品的性格,小空间和大空间在视觉感受上,两者完全不同,那么我们在界面设计中如何去更好的运用空间来设计排版。
有一个很好的方法就是可以运用网格去搭建空间,在平面设计中,运用得非常多,那么在用户界面中,同样也可以运用网格去搭建,下面看一个案例:
如上图作者把一个界面分为4Gird,通过搭建好的网格来进行界面中元素排版,右侧是我拆解的图(备注:网格的搭建并没有任何强制性的规定需要搭建多少列,最终的搭建列数需要根据这个产品内容复杂程度去定义的),比如:我最近在做车载HMI设计语言,同样也运用了网格,那么我会根据整个车载HMI产品复杂程度去搭建,同时也运用了几种网格配合使用。
上面两个例子我们可以发现 设计师运用了大空间来设计界面,这使得整个界面呼吸感更强,更透气,因为也是 娱乐 类偏杂文产品,所以设计会偏艺术化一些。
韩国29cm产品是我比较喜欢的一个app,整体设计呼吸感很强,留白空间大,视觉焦点清晰。
我们都知道大的物体更吸引眼球,更容易引起我们的注意,那么在设计中,我们一般都会将重要元素放大,突出显示。
a和b那个更吸引你?
答案是a. 因为a类型排版看起来很大,更具有吸引力。
上面案例中算是大小方法上运用比较好的,我们可以看出视觉层次非常清晰了。首先我能快速知道哪些重要信息,肯定是封面图,接着左上角logo,然后就是导航和标题了,最后就是针对每个内容块的一些详细文案解释。
简单示例,重要的信息一定要大,次级信息弱化。
颜色在排版设计中起着很大的作用,能起到点睛之笔,又或者为画面带来活力,又或者代表着品牌,当然我们在UI界面中字体颜色一定要慎用,因为不同颜色含义是不同的。合理恰当运用颜色, 能够瞬间提升设计品质感。
上面这个web设计中,设计师通过红色来强调重要信息,同时也让灰白的画面有了些许不同之处。
对某些文本使用辅助颜色,例如链接文本,图1 使用方式正确。图2将颜色大量使用在正文,严重影响视觉体验。
避免像图2那样使用对比度低的颜色。
对齐是界面设计中我们经常提到话题,也是提升界面品质感最重要的一个隐形的力量,也许有时候我们会忽略他,有时候会不经意间就没做好。
对齐的界面比不对齐的要整齐很多,视觉流也符合用户阅读习惯。
我们可以借用前面所学的网格来对齐,这样不仅设计有节奏感, 同时画面很整齐美观。
我们界面设计中可以有三种思路对齐方式,当然根据业务板块去选择合适的对齐方式,三种对齐方式都有一个隐形的轴(看我标的线),然后围绕这个去排版设计,自然形成一个规则的视觉流。
上面案例中作者整体偏左对齐,这样形成以左为中心一个轴展开视觉流走向。
我们在做界面设计时候,会经常遇到有人说你的设计,要么是这边太重了,要么就是太轻了,或者这边要不加点东西进去,不然太空了,为什么?
这就是平衡定律,如果同一个环境下的物体没有保持平衡关系,我们视觉感受上是很不舒服的。
下面我们看几个例子:
图1和图2 我们可以看出,图2 给人第一感受就是不平衡的,整体视觉重心偏左。
上图案例,设计师通过按钮来平衡整个画面视觉重心,因为左侧内容多,如果按钮很弱或者很小,是很难平衡画面的,因此我们做界面时候,定义一些按钮大小也是非常考究的。
左边视觉界面,右边拆解原型出来,我们可以看到设计师也是通过元素合理分布使得界面整体平衡。
字体选择对界面排版非常至关重要,这也是所有界面排版中必要的一步,不同字体有不同的性格属性,我们需要根据产品来选择恰当的中英文字体。同时,也需要记住,一个产品APP界面设计中,字体最好不要超过两种
推荐一些我认为2019比较好用的英文字体,大家做概念设计时候或者提案方案包装时候是可以用到的哦(吐血推荐)。
分别是:Montserrat 和 Nexa 字体。
分别是:Futura 和 Playfair_Display 字体
中文好用的字体,大家应该都知道,平方字体,思源黑体,汉仪旗黑,兰亭纤黑,我就不做示例了。
终于到最后一趴了,最后这点是整个设计排版的核心之一,为什么?
如果不清晰设计目标,那么整个排版风格也许最后产出和你用户群体或者产品性格是两种类型的,不同产品风格会有不同的排版style。
比如:我们产品是奢侈品,那么整体排版设计风格一定是使用大网格,大空间去设计,字体纤细等。如果是简约现代呢?又或者母婴产品, 科技 产品, 娱乐 产品等等,每个会有一些特殊排版思路。所以了解你的设计目标,并确定设计原则。
有了这些原则与目标,那么接下来就是开始找参考,找灵感找到对应产品他们是如何排版,如何控制画面节奏感的,推荐多去使用pinterest或者behance
通过七大点排版思路,可以更好的运用在界面设计中,每个排版原则并不是独立的个体,他们之间是相辅相成的关系,比如大小离不开网格,也离不开对比,颜色等等,缺乏某些元素,那么界面就会缺失灵魂,设计产出质量并不好!
好了本期到这里结束,下期会继续和大家分享如何巧妙运用图形提高界面品质感和增强细节!
题图来自 Unsplash ,基于 CC0 协议

更多文章:
网店运营推广中级实训seo标题优化怎么做?新站长尾词选择策略
2026年6月16日 05:06
在线一键生成gif表情包(在线gif表情包制作器有什么 怎么制作动态图)
2026年4月23日 01:27
新站如何利用SEO联盟大全获取流量:seo联盟大全如何帮助新站快速排名
2026年6月11日 20:03
优选视频教程资源整合网怎么样?有什么专门学习Premiere的教程网站
2026年4月19日 16:01




















