关于【ui界面设计的步骤】，今天犇犇小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
内容导航：1、ui界面设计的步骤：详解大厂的UI设计规范制作步骤2、ui界面设计的步骤，用实战教你界面改版1、ui界面设计的步骤：详解大厂的UI设计规范制作步骤
本文将为大家介绍如何敲定一个具体的设计原则，并展示了具体步骤——从公司战略层提取到核心一级关键词，到二级关键词，以及对应的设计手法，对应到形色字构质。
上篇文章讲了为什需要设计语言以及设计语言包含了哪些内容，《像苹果Google一样做设计语言，带你了解全流程》为什么需要设计语言？对内，保证设计团队的一致性，给用户体验一致性，提升设计效率；对外，统一的品牌符号，有助于加深产品在用户心中的印象，同时设计语言设定包含了，设计原则、色彩系统、颜色系统、栅格系统、图形、字体、投影等原则，今天来和大家分享，如何去敲定一个设计原则。
一、提取设计原则关键词
1. 提取一级关键词
第一步，先要去提取出关键词，这个关键词怎么来。
有几种方式获取，第一个从整个公司战略出发，任何一个产品一定有他的战略——品牌战略、商业战略。
举个例子，假设我们是ebay，公司今年战略是全球化、高品质、正品，那么这个就是一级核心关键词，所有的设计语言一定要和公司战略结合起来，可以理解为战略关键词是整个设计语言顶部金字塔。
2. 运用情绪板提取二级关键词
有了一级关键词后，需要去思考，那么什么样的设计能给人全球化的感受呢，什么样的感觉能有高品质，正品应该传递什么样的感觉呢？
此刻需要用到第二个方法就是情绪版，通过情绪版去把符合这些关键词感受的图形具体化。
二、高品质特征是什么？
下图是一组日本的花茶设计，那么在这组设计中，设计师是如何体现高品质呢？
首先包装很精美耐看，设计简约
做工精良，整个产品包装，都是在富士山脚下
采摘环境很透明，值得被信任
整个品茶的过程也特别让人向往，很有仪式感
整个的设计很完整，很有设计感在里面
通过以上案例拆解，我们能对这个高品质的关键词有更加进一步的理解，高品质原来在情感层面是一个这么抽象的感觉，但是很多同学会问，那么这二级词汇也很抽象，如何靠这个来做设计，很难去理解及表达，别着急，还有下一步。
2. 高品质设计表现形式？
关于高品质在视觉形式上如何来体现了，哪些设计感觉能代表高品质呢，这个时候就需要我们去寻找一些设计参考，这些案例要能代表高品质。
✅ 清晰的有品质的图片
❎ 牛皮癣，不精致不可取
✅ 优雅的排版和留白，文字清晰，杂志感受
❎ 图文密集，缺少版式不可取
✅ 精致的布局，栅格的体系，给人品质感
❎ 缺乏版式及设计感
✅ 有设计细节的
❎ 无细节不可取
✅合理的配色，简单清晰
❎山寨的配色不可取
✅设计的延续性和完整性
2. GOOD CASE
3. BAD CASE
三、设计分层
以上就是我们从一个战略关键词逐步推导到一级关键词，到二级关键词，到设计手法，以及对应设计表达，推导的一个全过程。
本能层：清晰的，有设计感的，做工精致行为层：完善的，值得信任的，用心的精神层：让人向往的，值得期待的四、总结
以上大概为一个设计关键词的全部推导过程及到设计手法的确定，也是设计语言里面最难的部分，后面的关键词也是类似的思考方法和思路，最终通过推导我们需要得出每个关键词的情绪图，以及对应设计特征，最终需要在界面中展示的形色字构质，一个完整过程。
比如国际化，同样通过前面思路，我们需要去思考国际化如何在设计中体现，去提炼出代表国际化的象征物，如地标，国旗，邮戳，货币等等，包括如何在界面中融于国际化元素，以及人物和节日场景。
五、最后
希望大家可以通过我这期的分享，能够详细理解到如何从公司战略层提取到核心一级关键词，到二级关键词，以及对应的设计手法，对应到形色字构质，大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。
最后，依据推导出来的原则，以及对应的设计手法去做概念，去在界面中运用，最终完成设计语言第一步，设计关键词和设计手法定义。
2、ui界面设计的步骤，用实战教你界面改版
本文笔者将用自己的一个真实案例，来与大家解析产品界面改版从需求到设计的完整过程。
之前为大家分享过很多工作的案例，很多伙伴表示收获颇多，之所以分享工作案例是为了给大家讲解设计思路，让大家明白：为什么这样设计？出于什么目的？要解决什么问题？这些正是UI设计的根本所在，掌握了设计思路就能应对各种问题。接下来本期的分享，依旧会用真实案例解析从需求到设计的完整过程。
接需求与案例解析：
我司的运营小姐姐@我要改个产品的UI，下午找我聊需求。
一、准备工作
提前了解产品，从视觉、交互上感受一遍，标记产品中有疑问的地方，这样大概对产品有个概念，为接下来的沟通做好铺垫。
二、了解业务
首先需要运营小姐姐讲解一下业务逻辑，了解产品涉及到的各种角色，产品使用场景等等，期间把疑问一一了解清楚，尽可能对业务、角色、使用场景有充分的了解。
通过沟通，了解到：这个产品是一个H5问卷后台，业务上用来查看问卷统计的结果，使用的人群是公司的运营人员，产品时常会打包卖给客户，客户的使用场景不定，多数用户会用手机端查看统计结果。
三、沟通需求
接下来，沟通中我会先听她讲解需求，讲完后我会问她一些问题，确保我理解的正确。
需求沟通后，此产品问题为：界面太乱，很难用，需要改的好看舒服好用。
这时候就要想到，她是不是用了其他体验好的产品，如果是的话，这个产品可能是重要的设计参考，然而了解后并不是因为用了其他产品，是一直以来就不好用，没时间改而已。
接下来的需求沟通就要落实到页面中，需要一起探讨产品，不明白的地方要了解清楚，从中总结优化的地方。
下面开始案例分享：
第一个页面改版：
上图为“统计问卷”首页，A、B、C处为页面中较为突出的点，其中C处最为明显，沟通后得知C处图表的切换是为了截取图表做ppt，仅此而已，所以此处UI设计上需要弱化。
其实用户之所以觉得页面看起来不舒服，是因为想看的元素被弱化，而不该看的却过度设计，这样用户在看页面过程就会很费神，因为获取信息要躲开视觉上被过度设计的地方。
例如A处，用了页面中唯一的橘黄色，当初设计者应该是为了能强化区别上下题目的分界，但也成了突出的视觉干扰项。
其实分析后，页面中用户要看的是两个地方，一个是B处答题的比例数据，另一个是旁边的“小记”数据量，而B处进度条的设计过于突出，与文字没有良好的视觉比重。
结合以上问题进行改版：
解决A处问题：
把每道题设计为卡片式，这样能很好的区别上下题的界线，题号从突出的橘黄色改为黑色，使得页面视觉上不那么跳跃。
解决B处问题：
弱化变细进度条，与文字视觉比重相当，不会显得突兀，排版上下排列改为左右排列，这样能够缩减表格的高度，页面可以显示更多的内容。
解决C处问题：
图表切换是个弱功能，使用频率较低，所以放到卡片的右上角弱化设计，用切换的方式展示。
不仅仅是以上的问题，排版的细节也会大大提升产品的质感。
旧版所有元素的排版间距几乎没有什么规律，这也是导致用户对产品有乱糟糟印象的原因。
改进后，用间距去表达元素之间的关系，间距设计常常会用到“黄金比例”或“五分原则”，黄金比例不必多说，五分原则就是相关的元素用周边0.5倍的距离表达亲密关系。
当设计好第一个页面后，需要先给到需求方评审，确认没问题后再继续，这样就尽可能保证了后面的设计是符合他们需要的。
上图只是个最终的结果，过程中做过一些小改动，最初发给需求方设计的页面，需要做简单的设计注解，这样才会更容易被理解，且具有说服力，最终确认没问题再继续其他页面的设计。
第二个页面改版：
上图是给做问卷的人配置红包奖品的页面，看完后我表示心疼我们的运营人员。
A处本可以切换项目，但现在的设计显然是不可点击切换的状态。B处是这个项目总金额统计，目前排版色彩杂乱且拥挤。C处是给问卷配置红包奖品的各个属性信息，然而元素间没有层次，依旧杂乱拥挤。D处按钮没有主次关系，排版拥挤。E处是个“增加奖品”按钮，现在看起来没太大问题。改版后页面延续了首页的卡片风格，保持一致性。
解决A处问题：
“子入口切换”用户很难理解，因为不是确切词，例如换成“项目切换”“问卷切换”就很容易理解，（关于文案的设计之前总结过一篇文章，文章底部有链接）当然也是可以去掉的，因为运营人员对每个项目都很熟悉，没必要注解。
解决B处问题：
重新定义排版后，显而易见会比之前要清晰透气很多，动态变化的金额用颜色突出强调，未配置金额为次要信息，用灰色表示。
解决C处问题：
改变排版样式，视觉上有主有次，“配置数量”跟“个数”为重复信息，只留一个即可。
解决D处问题：
按钮“已启动点击禁用”拆分为“点击下线”按钮，和问卷状态（进行中），“展开”按钮放到最左边，和“编辑”并列。
解决E处问题：
“新增奖品”按钮，如果增加配置奖品列表，就会把按钮挤到不可视区域，这样的设计不是特别推荐，所以设计成悬浮按钮，旧版本已经建立用户的按钮功能认知，悬浮按钮上面配加号图标，用户就会很容易理解。
第三个页面改版：
上图还是第二个改版页面，此次要改版的是，点开“展开”按钮显示的属性，目前的问题是有很多重复的信息——例如时间，上面已经显示时间，最下面又出现同样的时间。
最严重的问题是：所有灰色字的注释，不符合逻辑，不应该在展开的属性下面提示，因为这已经是编辑好的内容，再去提示就意义不大了。
模拟一个场景，比如：上图红圈的地方，已经设置好了奖品名称为“幸运红包”，展开后有个灰色字提示“用户中奖后，用于显示给用户看”。如果发现理解错了，然而在此页面是不可以改正的，所以灰色字应该在“新增奖品”的编辑中提示，用户在输入信息的场景下，提示才是最合理的。
页面改进后，去掉重复的属性信息，去掉灰色字的提示，（去掉这些内容是提前跟需求方探讨过的）最后用最少的空间展示了所有的信息，更清晰明了。其实展开后的卡片高度，完全也是可以考虑去掉“展开”“收起”的功能。
第四个页面改版：
当我看到这个页面时，不知道为什么要有A处的信息，所以再次请教需求方寻求答案，给我的答案是“子入口”“IP”是为了给开发人员提供便捷查询。例如：这个中奖者存在刷红包行为，可以通过A处的信息进行查询。
很显然这并不合理，因为对用户来说没有用，还造成了认知负担，如果存在不良行为，提供编号信息就可以搞定了。
B处的设计，让页面没有条理，更是一个信息干扰项。
页面改进后，依然沿用首页卡片式的设计，去掉“子入口”“IP”“昵称”多余属性，去掉昵称是因为答问卷一般不会获取到用户昵称。
“中奖”和“未中奖”卡片，设计上有明显的视觉比重差异，去掉未中奖的绿色标示，只突出中奖者。
最后一个页面改版：
上图是做问卷用户答案页，页面的弹窗偏小，使用起来很憋气，A处不知道什么意思，询问后可以直接去掉，B处是一个不合理的“确定”按钮，原因是用词错误，应该叫“关闭”更合适，因为这个页面是查看信息，并没有执行某些任务操作。
改进后加大弹窗，去掉页面中的多余元素颜色，上下题目用留白间距隔开，去掉“确定”大按钮，因为太占面积，改为右上角“关闭”按钮。
最后，当我们看到一个页面时，如果只看到美与丑，那是不客观的，这可能是对UI设计最大的误解，UI的美不只体现在表面上，还有内在的体验中。
UI设计一般都会带着一种目的进行设计，目的绝不只是设计的好看，更多的是创造一个良好的产品体验，同时能够助力业务，实现产品价值。
UI设计师对于业务要积极的去了解，对需求不要总被动接收，要有意识的去探讨挖掘，对业务的熟知，需求的准确拿捏，是你开始设计前最好的基石。
作者：吴星辰，互联网设计帮
本文关键词：ui界面设计的步骤是什么，ui界面设计的常用方法及原则，ui界面设计图，ui界面设计基础知识，ui界面设计流程。这就是关于《ui界面设计的步骤，详解大厂的UI设计规范制作步骤》的所有内容，希望对您能有所帮助！