设计达人 http://www.shejidaren.com 爱设计,爱分享。 Wed, 01 Jan 2020 00:00:45 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.4 配色美丽的UI插画,Sky光遇的小可爱们 http://www.shejidaren.com/peise-meili-de-ui-chahua.html http://www.shejidaren.com/peise-meili-de-ui-chahua.html#respond Wed, 01 Jan 2020 00:00:43 +0000 http://www.shejidaren.com/?p=34334 配色美丽的UI插画,Sky光遇的小可爱们

当学会插画之后,然后画自己喜欢的东西将会是一件很开心的事情,今天分享的UI插画作品就是如此,设计师喜欢Sky光遇这个游戏,然后就把里面的角色画了出来,这样练习插画同时,只会觉得开心而不会枯燥。Sky光遇是一款游戏,小编虽然没有玩过,了解过之后这游戏的画风真的好看唯美,设计师「负空间的鸟」将这些游戏角色绘制成可爱的扁平化UI插画风格,大家一起来欣赏学习,特别是配色真的很让人喜爱。 配色美丽的UI插画,Sky光遇的小可爱们
设计师:负空间的鸟 个人主页:i.ui.cn/ucenter/1060463.html
配色美丽的UI插画,Sky光遇的小可爱们 下面是一个简单的作图过程。 1. 灵魂草图 配色美丽的UI插画,Sky光遇的小可爱们 2. 涂大色块 配色美丽的UI插画,Sky光遇的小可爱们 3. 细节刻画 配色美丽的UI插画,Sky光遇的小可爱们 完成! 配色美丽的UI插画,Sky光遇的小可爱们 一个10个Sky光遇的游戏角色插画,可爱型的配色,相信大多数人都喜欢上这种色彩搭配方案! 配色美丽的UI插画,Sky光遇的小可爱们

温柔的露露

配色美丽的UI插画,Sky光遇的小可爱们

憨憨的狐狸

配色美丽的UI插画,Sky光遇的小可爱们

烟花爱好者二二

配色美丽的UI插画,Sky光遇的小可爱们

精分人格懒花菜

配色美丽的UI插画,Sky光遇的小可爱们

风艺人TT

配色美丽的UI插画,Sky光遇的小可爱们

精分人格乖花菜

配色美丽的UI插画,Sky光遇的小可爱们

财主卡卡西

配色美丽的UI插画,Sky光遇的小可爱们

资深旅人风琴手

配色美丽的UI插画,Sky光遇的小可爱们

墓土美食家花菜

配色美丽的UI插画,Sky光遇的小可爱们

南塔缘小花菜

最后,还有一波小头像哦! 配色美丽的UI插画,Sky光遇的小可爱们 喜欢这些插画吗?也推荐大家看看设计师出过的插画教程《水彩风美食插画绘制教程》,学习她的绘制手法,当然设计达人认为最重要的还是自己多练习,当决定要学习一门技能时,就是下百分之一百的精力全力学习,现在已经有很多教程,缺的就是一分坚持学习的毅力,同学们,加油哦! 喜欢这组可爱的Sky光遇UI插画作品吗?请分享给更多小伙伴们一起欣赏吧~


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/peise-meili-de-ui-chahua.html/feed 0
AI+PS插画教程,轮滑美少女 http://www.shejidaren.com/ai-ps-jiaocheng-lunhua-saoniu.html http://www.shejidaren.com/ai-ps-jiaocheng-lunhua-saoniu.html#respond Tue, 31 Dec 2019 00:00:02 +0000 http://www.shejidaren.com/?p=34295 AI+PS插画教程,轮滑美少女

现时有很多流行的插画风格,其中扁平化的插画非常流行于UI设计行业,然而绘制这些插画需要用到的工具不只是PS或AI单软件,同时结合使用将会事半功倍。今天设计达为大家分享来自飞屋设计老师的插画教程,使用AI+PS这两个设计工具,绘制漂亮的滑轮少女插画,大家一起来学习这个插画教程吧! AI+PS插画教程,轮滑美少女 准备工具 Photoshop (2019) Adobe illustrator (2019) 数位板 草图构思 无论是设计也好还是插画也好,都总是少不了从草图起步,这是idea的来源。实际的画面可以不一定依据草图,它只是给出一个大方向。 AI+PS插画教程,轮滑美少女 绘制人物头部 STEP 01 绘制基础形从AI开始,我们打开AI,新建一个文档为1600*1600px,然后再进入到【编辑>首选项>参考线和网格】,在面板中设置如下参数: AI+PS插画教程,轮滑美少女 STEP 02 我们开始要学会用网格来辅助造型,首先显示出网格,这里要进入【视图】,然后单击【显示网格】,并且勾选【对齐网格】。有了网格的辅助,我们的画面就会看上去有种内在的稳定感。 AI+PS插画教程,轮滑美少女 STEP 03 接下我们来开画,人物的侧脸,把草图拿来看了,然后扔掉。警告:不要完全去勾草图,否则你会错过一次练习造型的机会。 人物侧脸的左侧是最终呈现的线条,所以注意这条边要对齐网格,并且注意它的轮廓表现。而这个形状的右边那条边由于最终会被头发等形状所遮挡,因此随意画出即可。色彩可以填充为肉粉色,作为皮肤的色调。 AI+PS插画教程,轮滑美少女 STEP 04 接下我们要继续画出头盔,头盔的步骤如下图所示: AI+PS插画教程,轮滑美少女 STEP 05 把头盔放到人物的脸部上方,将它略调整为与网格对齐,人物的头部完成了一大半。 AI+PS插画教程,轮滑美少女 STEP 06 接下绘制人物的头发,头发的部分我们打算用矩形来生成。下面是用矩形做头发的思路:利用矩形来拼成头发的形状,矩形本身是直角,但是经过圆角拉伸后就变成了圆角矩形,这时就很容易做出头发的飘逸的效果,又不失扁平人物的风格表达。过程如下图: AI+PS插画教程,轮滑美少女 STEP 07 把上一步做好的头发,连接到头部。这里需要补充一个色块,并且做好圆角的处理。要做到自然而然,不要接得太生硬。该调整的地方继续调整。 AI+PS插画教程,轮滑美少女 到这一步,头部就完成啦~再检查看看头部的视觉是否正常。 AI+PS插画教程,轮滑美少女 画出人物身体 身体的部分要画出来,首先要明确人物的头身比。当然我们不是再现真实的人物,所以允许头身比可以有部分出入,但是基本上还是按照6-8头身的比例。这个比例具体是指什么意思呢?就是我们的身体高度刚好是头部高度的6-8倍。 下图为7.5头身比例图: AI+PS插画教程,轮滑美少女 STEP 08 我们画身体也是从直线开始,利用钢笔工具画直线,用直线来勾勒造型,注意对齐已有的网格线。 AI+PS插画教程,轮滑美少女 STEP 09 然后把部分的直角转为圆角。 AI+PS插画教程,轮滑美少女 STEP 10 再画出右边的手臂,注意比例和对齐网格。然后再把部分尖锐的角转为圆角。 AI+PS插画教程,轮滑美少女 STEP 11 手部的画法很简单,也是从矩形开始。然后把部分直角转为圆角。 AI+PS插画教程,轮滑美少女 AI+PS插画教程,轮滑美少女 STEP 12 最后把头发的部分拉大一点,然后把所有的细节都整理一遍。 AI+PS插画教程,轮滑美少女 STEP 13 画出女生的小裙子,也是从直线起步,最后把裙子边缘转为圆弧。 AI+PS插画教程,轮滑美少女 STEP 14 两条腿的画法依然是利用钢笔工具,注意小腿肚可以给个弧形来表现。 AI+PS插画教程,轮滑美少女 STEP 15 画出鞋子的部分,并且增加鞋子的滑轮。 AI+PS插画教程,轮滑美少女 AI+PS插画教程,轮滑美少女 STEP 16 把人物的膝盖的部分的细节再进行细化,如下图 AI+PS插画教程,轮滑美少女 到这一步,整个人物的基础大型就完成了。 AI+PS插画教程,轮滑美少女 继续丰富装饰细节 STEP 17 在目前的基础上给人物增加小细节,这些小细节可以增加人物的生动感。比如我在这里给人物添加了头盔、腰带、鞋底以及长筒袜的细节。这部分纯靠想象,大家可以稍微放飞自我。 AI+PS插画教程,轮滑美少女 利用AI的形状生成器工具就能生成不同的形状。 STEP 18 长筒袜的图案可以画出来,让画面更丰富。首先我们要画出一条线,这条线的描边为80px,然后进入【效果>扭曲和变换>波纹效果】,面板参数如下所示。 AI+PS插画教程,轮滑美少女 AI+PS插画教程,轮滑美少女 STEP 19 将上一步所做的形状进行扩展外观,变为封闭的路径形状,然后应用到长筒袜的白色形状上。多余的部分用形状生成器工具删掉。 人物的塑造到这一步就完成了 AI+PS插画教程,轮滑美少女 画阴影提质感——一切交给PS 我在扁平插画课里给学员们所介绍的增加光影的方法一般来说是用AI完成的,但是其实增加光影,PS也能做到。所以,我们这次就用PS来增加光影表达。 STEP 20 可以打开PS,新建一个1920*1200px的文档,然后将AI所画的对象复制粘贴过去。粘贴时选择“智能对象”,并且增加一个纯色背景,背景色为暖粉色。 AI+PS插画教程,轮滑美少女 STEP 21 这时利用数位板/手绘板,开始对人的皮肤的部分增加阴影,用普通的画笔即可。 新建一个新的图层,然后设置为下面那个图层的剪贴蒙板。在新图层上添加阴影色块。利用【选择>色彩范围】,首先选中皮肤的颜色,这时记得要选中人物的图层。然后在新图层上开始绘制阴影区域,颜色稍微比皮肤的颜色略深。 由于有蚂蚁线选区的控制,开始涂阴影的时候就不会溢到其他部分。除了阴影,还可以增加高光的部分,让画面看起来更立体。画笔选择“硬边圆”就好。 AI+PS插画教程,轮滑美少女 STEP 22 利用以上所介绍的步骤,开始对其他的部分都分别画上阴影和高光。 因为画的过程是非常自由的,只需要掌握基本的原则即可。这里不再详述每一步,下面是需要注意的要点。 AI+PS插画教程,轮滑美少女 可以利用画笔画出部分细节。 AI+PS插画教程,轮滑美少女 STEP 23 最后把长筒袜的部分也做出阴影表现,这里的处理手法和上面略有不同。因为这里涉及的颜色较多,所以我们不能用单色的处理手法来提供选区。 此时需要再新建一个剪贴蒙板,利用钢笔工具来生成长筒袜的形状,然后用棕色涂出阴影部分,再降低整个图层的透明度。 AI+PS插画教程,轮滑美少女 STEP 24 追加颗粒感的纹理,再新建一个图层,创建剪贴蒙板,继续自由发挥。这时可以选择【特殊效果画笔】里的“喷溅笔刷”,或者选用其他你自己私藏的颗粒感笔刷,这里不是那么绝对。 AI+PS插画教程,轮滑美少女 STEP 25 增加了颗粒的效果,可以让边缘变得也具有这种生动的手绘感,因此这时可以再新建一个图层,利用边缘比较有机的画笔来表现,这里的图层不需要创建剪贴蒙版。 其实插画不一定要加颗粒,增加颗粒是为了提升趣味感。大家可以对比一下,增加颗粒前后。 AI+PS插画教程,轮滑美少女 STEP 26 最后通过色彩平衡等调色工具来对整体的色彩进行调整,并为人物增加文字背景,将文字也画出阴影的效果,冲淡背景的单调。并且为整个插画增加点状图案。 最终效果如下: AI+PS插画教程,轮滑美少女 写在后面 后面为插画增加文字和图案的部分,由于是即兴发挥,所以不再多累述。你可以增加图案,也可以保持原状。这部分可以发挥你的原创来绘制。 作者:飞屋设计,微信号:ifeiwu81 转载请保留作者及来源信息,谢谢合作!


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/ai-ps-jiaocheng-lunhua-saoniu.html/feed 0
从构建到落地,学习组件化设计 http://www.shejidaren.com/xuexi-zujian-hua-sheji.html http://www.shejidaren.com/xuexi-zujian-hua-sheji.html#respond Mon, 30 Dec 2019 02:43:25 +0000 http://www.shejidaren.com/?p=34276 从构建到落地,学习组件化设计

UI组件化的设计越来越流行,对于大型平台的项目更加需要组件化设计,使用它不仅可以提高效率,后继也能让团队方便的迭代和维护,它的定制化、高效性和迭代性是最大特点。但是组件化设计并不容易,今天设计达人分享来自360TAD的组件化设计经验,学习组件化如何从构建到落地,我们一起看看。 从构建到落地,学习组件化设计 目录:
  1. 前言
  2. 为什么要做组件化平台
  3. 组件化平台的设计原则
  4. 组件化平台的设计流程
  5. 组件化平台的难点
  6. 如何制定自身业务的组件
  7. 组件化平台的迭代和维护

1.前言

后台作为支持前台业务的管理系统,它起到管理业务数据和管理前台内容的作用。 当公司业务规模的扩张时,后台的设计和开发需求也随之扩大。 大部分公司的后台的用户人数少,可能就那么几个管理员使用,亦或特定的几百人使用,所以绝大部分B端后台设计不像C端产品拥有广泛的使用人群(大规模商业化B端产品除外),公司也就不会投入大量的设计资源和开发资源在后台上面。 下图为ant design后台范例。 从构建到落地,学习组件化设计 B端后台设计1.0时代,设计师将需求原型制作成视觉稿,在这一过程中,不太考虑组件样式的复用,组件样式一直在重复造轮子,组件各种样式和状态需要浪费设计师大量的时间和精力,这种工作流程低效,且拉低整个产品的上线周期。 B端后台设计2.0时代,B端后台设计不像C端那样具有品牌调性,后台组件交互形式和视觉样式具有高度的通用性,所以组件可以重复使用。 设计师只要将高复用性的组件做成设计规范,设计师接到需求,即可直接拼组件搭建界面,不需要再设计新的组件样式,这种工作流程极大的提升了设计人效,以前需要一周完成的设计,现在只需要2天就可以完成。 从构建到落地,学习组件化设计 B端后台设计3.0时代。开发将设计师的制作的组件以代码的形式进行封装,打造成一个组件化平台。 PM用设计师制作的元件库直接搭建界面,原型完成之后,交互设计师review原型之后,对可优化的点进行优化,就可以交给开发,开发根据原型,直接进行代码的拼接修改调整即可完成后台网站的搭建。 从构建到落地,学习组件化设计 一个后台网站用常规的设计流程,在设计1.0时代上线周期如果需要40天,那么在设计2.0时代只需要30天,在设计3.0时代(组件化平台)的情况下使用只需要10天。 组件化平台最大的价值是进行提效。将人力释放。开发有更多的时间进行代码的优化,提高代码质量,设计师有更多的时间优化设计细节、优化流程和熟悉业务。开发和设计不再被各种业务所追赶,拥有时间提升业务能力和专业能力。

2.为什么要做组件化平台

组件化平台具有3大特点分别为:定制化、高效性和迭代性,这3大特点决定了需要做组件化平台。 定制化 最大的组件化平台是ant design,其次是element ,既然有了ant design和element。为什么我们还要做自己的组件化平台呢? 原因在于我们自己的组件化平台可根据业务需求,对平台做定制化组件,这样可以更好的服务公司业务。 有些复杂或者特殊的业务,需要的组件样式或功能在ant design、element 并没有,基于这种情况,所以需要做自己的组件化平台。 高效性 高效复用于团队和公司业务后台,节约设计和开发资源。避免设计师在设计过程中重复做各种组件样式和状态,浪费大量时间。避免开发基于新的设计样式写代码,提高人效。 将人力用在更有价值的地方,而不是这种重复的搬砖工作中。 从构建到落地,学习组件化设计 迭代性 组件化平台贴近公司业务,不断扩展组件类型,使得组件化平台服务于公司业务,后期基于业务需求不断的迭代组件样式。使得组件化平台成为一个真正有意义的提效平台。

3.组件化平台的设计原则

这里的设计原则指的是在设计整个设计平台需要明确的一系列原则,而这些原则都是在后续设计组件决策过程中的依据。 有了明确清晰的原则,对于构建整个组件化平台具有极大的意义。 兼容性 为什么ant design、element 两个网站很成功,很多公司后台在使用,其中一个核心原因就是他们的代码兼容性好、bug少。所以在构建组件化平台时候,需要开发花大气力优化组件代码兼容性。避免代码兼容性差导致业务组使用率低。 通用型 后台网站,因为信息量大,用户使用时间长且频繁,所以对于视觉设计来说,需要审美耐看,多看不腻,避免花哨的设计元素破坏用户对于信息的获取。 对于交互来说,后台网站设计已经基本固化,目前市面看到的组件设计几乎就是组件的最优设计形态。 所以在设计组件交互时候,可以参考目前主流产品(ant design、element)组件交互设计。 扩展性 在设计组件之前,需要熟悉后台常用的使用场景,知道通用的组件类型有哪些。 前期要尽量减少组件类型的冗余,方便组件功能和设计的后续扩展。前提也是要保证上线的组件可以覆盖绝大部分场景,避免组件化平台的不可用。 在设计过程中一种类型的组件各种状态做完整,避免后续改动。一种组件后续可增加其他类型,方便业务使用。这样可以很好的保证组件化平台健康而良性的发展。

4.组件化平台的设计流程

组件化平台在设计过程中,流程有原型设计、原型评审、视觉设计、视觉稿确认和最终的走查验收。 从构建到落地,学习组件化设计 原型设计 前期需要交互设计完成对组件类型进行分类,常见的分类是基于功能分类。即相同功能的组件分为一组。 将所有组件分类完成,可生成了一个组件化平台内容目录。接下来就是对每个组件进行定义和功能类型设计。 从构建到落地,学习组件化设计 在设计功能类型时,需要参考ant design、element等知名网站,以及结合自己的B端经验和现有业务具体情况,确定哪些组件类型可以先设计,哪些组件类型放在后面设计。和开发私下确认每个组件类型是否有遗漏或多余的组件类型。 原型评审 拉上所有开发一起评审,评审基于一个分类和开发讨论确定所有对细节。确保整体交互细节统一,交互效果和规则无问题。下图为select组件部分内容。 从构建到落地,学习组件化设计 视觉设计 视觉设计师前期需要花大量的时间用于探索视觉风格和对应的视觉规则,例如颜色规范、字体的颜色、字号、行高和栅格规则等。保证视觉风格使用合理。在视觉元素确定之后,再设计组件。 视觉稿确认 视觉设计基于交互稿,完成视觉设计,完成后,和交互设计师一起确认,当视觉稿没有问题后,发送给前端开发。 走查验收 交互和视觉设计师对线上开发的组件效果进行走查,形成走查报告,并发给前端开发,并和前端开发开会讨论,形成最终的走查报告,将前端开发修改后的问题,从走查报告中删掉,这样可以保证线上问题逐步修改完成。

5.组件化平台的难点

在组件化平台的过程中存在3个难点:1.设计师要明确前端实现逻辑;2.组件类型设计取舍;3.视觉全局规划。 从构建到落地,学习组件化设计 前端实现逻辑 明确前端demo展示和代码配置的区别,组件demo展示的交互样式可以在代码中展示,也可以在代码中移除。如下图所示,含有可删除的图标,其他前端使用时可以在代码中删除。 从构建到落地,学习组件化设计 明确前端demo展示和前端可更改的范围。例如block组件,其他前端复用代码时,可以自定义设置其宽度以适应各种不同的页面内容设计。 从构建到落地,学习组件化设计 组件类型设计 选择常用组件类型,尽量不上功能兼容性差的组件。前期平台尽量不上低频类型的组件。 例如对于选择器的多选样式,我选择了选项前加复选框,而不是用目前ant design的选项被选中后勾号放在后面。 这种选择有两个理由:1、用户未选择,很难判断这个选择器是单选还是多选。2、选项前加复选框,和之后做树展示保持一致,样式上可以复用。 下图为上线平台样式: 从构建到落地,学习组件化设计 下图为ant design样式: 从构建到落地,学习组件化设计 视觉全局规划 组件种类众多,每个组件对应的类型也众多,组件化平台需要考虑所有组件的兼容性,所以在定义颜色、颜色四态和元素间距时候,需要全局平衡,尽量减少规则太多,导致组件化平台设计规则紊乱。 以颜色为例,基于360品牌色调,确定了主色基调,通过对多种因素(例如各种不同素质的显示屏)的综合考量并进行试验,结合颜色具有的三个特性,并从视觉的角度定义辅助色。 从构建到落地,学习组件化设计 关于按钮:按钮状态遵循了“状态可感知”原则,快速的让用户了解自己处于何种状态,基于这种情况,将按钮5个状态清晰的表现出来。 从构建到落地,学习组件化设计

6.如何制定自身业务的组件

设计团队如果已经做了很多后台业务,那么只需要将所有对后台业务对组件进行梳理、分类、将存在重叠组件类型进行删除。形成属于自己业务的组件库。

7.组件化平台的迭代与维护

配合业务进行组件化平台的迭代和维护,使组件化平台在迭代中不断发展成长,在这个迭代和维护过程中,设计师是产品经理的角色,让设计师和组件化平台一起成长发展。 交互设计:吴轶 ;视觉设计:侯婷、宋紫漫 来源公众号:360TAD


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/xuexi-zujian-hua-sheji.html/feed 0
UI设计师应该掌握的设计原则 http://www.shejidaren.com/ui-sheji-yuanzhe.html http://www.shejidaren.com/ui-sheji-yuanzhe.html#respond Sun, 29 Dec 2019 10:32:27 +0000 http://www.shejidaren.com/?p=34213 UI设计师应该掌握的设计原则

现在做UI设计已经不同几年前,只需要掌握视觉效果那么简单,设计师们必须时刻关注目前流行的设计趋势并且扩展自己的阅历,多看设计经验文章,正如今天分享的设计原则就是UI设计师应该掌握的知识,本文包含现在流行的产品规范以及常用的设计原则,对UI设计师来说了解这些对自身的设计会有一定的帮助。 UI设计师应该掌握的设计原则 本篇文章目的: 一篇文章快速掌握市面上主流规范原则和常用的原则。 本篇文章要讲的设计原则包含六类: 1.尼尔森十大可用性原则 2.三大原则定律 3.Ant Design设计原则 4.微信小程序设计原则 5.iOS设计原则 6.Material Design 设计原则

尼尔森十大可用性原则

尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。十大可用性原则不仅适用于Web端,也适用于移动端。 熟练掌握十大可用性原则对于指导设计来说意义重大,可提升整个产品的可用性体验。 十大可用性原则分别为:状态可感知、贴近用户认知、操作可控、一致性、防错、识别好过回忆、灵活高效、美学和最简主义原则、容错、人性化帮助。 原则一 状态可感知 定义:告知系统的当前状态,让用户可清晰的感知所处的操作状态。 例如淘宝注册,用户所处流程情况通过步骤条,可以清晰告知用户注册整体的注册流程状态。 UI设计师应该掌握的设计原则 例如微信转发消息,发送成功时,通过底部的snakcbar提示告知用户转发成功。 UI设计师应该掌握的设计原则 原则二 贴近用户认知 定义:尽量将生活中的逻辑和设计逻辑保持统一,这样就会更贴近用户的认知,用户上手成本也就更低。 例如iOS7之前的iPhone解锁,滑动解锁,这和生活中的用户侧拉开门的场景一样。这个设计非常贴切日常生活认知,用户上手成本特别低。 UI设计师应该掌握的设计原则 例如微信红包的设计,红包样式和现实中用户认知的红包基本一致,都是红色且外观相似。 用户要发红包时,先要塞钱进红包。其他人点击红包时,有一个拆开的按钮,用户拆开就会存入零钱,整个流程完全贴近用户的生活认知。 UI设计师应该掌握的设计原则 原则三 操作可控 定义:用户对于行为可预期可控制。对于用户的误操作,提供二次确认或者撤销的功能,这样可提高用户的操作可控性。 例如移动端中对于毁灭性操作,大部分都做二次确认,这样是防止用户误操作带来的删除损失。用户不用因为操作带来的心里负担,从而提升操作可控性。 例如微信聊天对话列表,用户删除列表,由于会清空消息记录,因此,通过对话框提示用户,这种做法可提升操作可控。 UI设计师应该掌握的设计原则 例如gmail邮箱,用户发送邮件成功后,可点击撤回操作。 UI设计师应该掌握的设计原则 原则四 一致性 定义:遵循统一的产品设计规范/逻辑。这里的一致性也包含产品和跨平台产品之间的一致性。 产品间的一致性,包含视觉和交互的一致性,无论是文案、视觉风格、组件样式等都包含一致性。 例如微信的卡片结构设计,列表的提示文案都是卡片里面,这个遵循Material design设计规范,ios中设计则提示语在卡片下方。 UI设计师应该掌握的设计原则 原则五 防错 定义:设置防错的机制,减少用户犯错。避免因为没有做防错措施,导致用户去犯错误。 例如微信朋友圈发动态时,什么都没有输入时,发表按钮置灰。如果不置灰时,点击发送是空数据,是不允许发送的。所以防错设计可以减少用户出错概率。 UI设计师应该掌握的设计原则 原则六 识别好过回忆 定义:减少用户记忆负荷,尽量提供用户需要获取的信息。 例如boss直聘,二次筛选时,所有填写是我筛选条件都展示出来,方便用户查看和修改。 UI设计师应该掌握的设计原则 例如三星手机相册,当删除相册时,对话框会把选择删除的数量标题上展示,提示用户会删除多少张,减少用户回忆。 UI设计师应该掌握的设计原则 原则七 灵活高效 定义:提供灵活的操作和高效的获取信息的操作。 例如mac原生邮件客户端上,提供过滤方式:未读,点击未读即可筛选出所有未读的邮件,灵活高效。 UI设计师应该掌握的设计原则 例如:短信提供批量删除和全选删除,这也是灵活高效的一个常见范例。 UI设计师应该掌握的设计原则 原则八 美学和最简主义原则 定义:保留产品最核心的信息,如果不是视觉信息优先级不是普适需求,要尽一切可能避免去影响产品的简洁和美观。 qq空间和微信朋友圈的feed流形成比较明显的对比。相比于qq空间,微信朋友圈更符合美学和最简主义原则。 UI设计师应该掌握的设计原则 原则九 容错 定义:用户在使用产品过程中出现了问题,及时准确的告知用户出现问题的原因。 例如淘宝注册时,用户输入手机号时,光标离开输入框时,进行较验,如果手机格式错误会出现原位提示用户手机格式不正确。 例如邮件发送失败时,会提示用户邮件已保存至发件箱。 UI设计师应该掌握的设计原则 UI设计师应该掌握的设计原则 原则十 人性化帮助 定义:在用户可能需要的时候,提供必要的帮助说明。 例如在淘宝注册时,用户注册失败影响注册成功率,提供帮助入口,提高用户注册率。 UI设计师应该掌握的设计原则

三大原则定律

三大原则定律包括:格式塔原则、菲茨定律和剃刀法则。 格式塔原则 通俗地说格式塔就是知觉的最终结果。是我们在心不在焉与没有引入反思的现象学状态时的知觉。 格式塔原则包含五个特性,分别为:相近性、相似性、封闭性、连续性和简单性。 1.相近性:人们会将距离相近的部分潜意识当作一个整体。例如下图所示。左侧距离都相同,人们会认为是一个整体,右侧三四列和一二列相隔较远,人们会认为这是两部分。 UI设计师应该掌握的设计原则 例如印象笔记拍照设置界面,保存照片到你添加到笔记的照片备份到相机胶卷。距离保存照片卡片距离较近,所以用户会认为这个是针对保存照片的提示语。 UI设计师应该掌握的设计原则 2.相似性:人们会将相似的部分,当做一个分组整体。例如下图,一组圆形,人们会当做一个组成部分。一组矩形,人们会当做另一组组成部分。 UI设计师应该掌握的设计原则 例如支付宝首页界面。扫一扫、付钱、收钱、卡包这四组相似的布局和icon,人们会当做一个分组。下方的转账、花呗、芝麻信用、淘票票电影等宫格导航,人们会当做另一个分组。 UI设计师应该掌握的设计原则 3.封闭性:元素处于一个封闭空间,人们会将各个部分趋于组成整体。例如圆形被线框包围,人们会将这个当作一个整体。 UI设计师应该掌握的设计原则 例如新浪微博国际版,通过卡片来分割一条微博信息动态,这样和其他微博可以产生强烈区分,卡片的好处就是可以容纳更多的操作和信息。 UI设计师应该掌握的设计原则 4.连续性:人们倾向于完整的连成一个图形,而不是观察残缺的线条或者形状。 UI设计师应该掌握的设计原则 例如app store 卡片展示,卡片因为露出一部分,用户有一种连续性的感知,人们知道右边还有卡片,用户就会尝试用手拖动卡片,查看更多卡片信息。 UI设计师应该掌握的设计原则 5.简单性:具有对称、规则的简单图形特征各部分趋于组成整体。 UI设计师应该掌握的设计原则 支付宝首页,各个功能模块具有对称、规则的简单性。 UI设计师应该掌握的设计原则 菲兹原则 任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。 UI设计师应该掌握的设计原则 得到结论:越是重要按钮,按钮要越大,这样操作时间就越短,越方便。位置距离用户操作越近,这样用户越易点击。 类似音乐类产品,都是将播放/暂停做的比上一首下一首做的大,同时放置于底部,目的就是方便用户快速点击。 UI设计师应该掌握的设计原则 奥卡姆剃刀法则 这个原理称为“如无必要,勿增实体”,即“简单有效原理”。若无必要,勿增实体。 不必要的元素会导致设计效率的降低,并且会增加不可预期的后果。在设计中我们可以去掉不必要的干扰元素,这样页面会比较纯粹、简洁。 例如下图所示,左图为蚂蚁借呗,里面信息字段较多,需要用户多次进行选择。 而右侧为微信的微粒贷,用户只需要选择还款期数即可,微信的微粒贷操作简单,用户在整个流程体验过程中流程,没有停顿感。从业务层面来说,蚂蚁借呗因为需要收集用户尽可能多的信息,所以字段信息比较大,而微粒贷却不需要。 UI设计师应该掌握的设计原则

Ant Design设计原则

详情请登陆ant design的网站查看:ant.design.com。里面都有详细的案例,方便大家理解和掌握 Ant Design设计原则一共包含10条,分别为:亲密性、对齐、对比、重复、直截了当、足不出户、简化交互、提供邀请、巧用过渡、即时反应。 1.亲密性:如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。 2.对齐:正如『格式塔学派』中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。 3.对比:对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。 4.重复:相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。 5.直截了当:正如 Alan Cooper 所言:『需要在哪里输出,就要允许在哪里输入』。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。 6.足不出户:能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。 7.简化交互:根据费茨法则(Fitts\'s Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。 8.提供邀请:很多富交互模式(eg:『拖放』、『行内编辑』、『上下文工具』)都有一个共同问题,就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。 邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。 9.巧用过渡:人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。 10.即时反应:『提供邀请』的强大体现在交互之前给出反馈,解决易发现性问题;『巧用过渡』的有用体现在它能够在交互期间为用户提供视觉反馈;『即时反应』的重要性体现在交互之后立即给出反馈。 就像『牛顿第三定律』所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。

微信小程序设计原则

原帖请查看微信小程序设计指南官方网站:https://developers.weixin.qq.com/miniprogram/design/ 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢。 微信小程序设计原则分为四部分,分别为:友好礼貌、清晰明确、便捷优雅和统一稳定。 友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户进行操作。 1.突出重点:每个页面都应有明确的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下,应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。 UI设计师应该掌握的设计原则 UI设计师应该掌握的设计原则 2.流程明确:为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。 UI设计师应该掌握的设计原则 清晰明确 一旦用户进入我们的小程序页面,我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷路,这样才能为用户提供安全且愉悦的使用体验。 1.导航明确,来去自如:导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户,当前在哪,可以去哪,如何回去等问题。微信在小程序内现不提供统一导航栏样式,开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。此外,微信iOS用户还可通过界面边缘向右滑动操作,返回上一级小程序或微信页面。安卓用户可通过物理返回键达到同样目的。 小程序菜单:小程序的所有页面,包括小程序内嵌网页和插件,微信都会在其右上角放置官方小程序菜单,样式如图。开发者不可对其内容自定义,但可选择深浅两种基本配色以适应页面设计风格。官方小程序菜单将放置在界面固定位置,开发者在设计界面时请预留出该区域空间,若需要在此区域附近放置可交互元素,要特别注意交互事件是否会冲突,操作是否容易被使用 。 UI设计师应该掌握的设计原则 小程序菜单深浅配色方案(iOS和Android):开发者可在满足可用性的前提下,从微信提供的深浅两套配色的小程序菜单中选择合适的方案,以适应小程序页面设计风格。 UI设计师应该掌握的设计原则 页面内导航:开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致,指向清晰,有路可退。受限于手机屏幕尺寸的限制,小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异,以便区分。 UI设计师应该掌握的设计原则 开发者可为小程序页面添加标签分页(Tab)导航。标签分页栏可固定在页面顶部或者底部,便于用户在不同的分页间做切换。标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。 其中小程序首页可选择微信提供的原生底部标签分页样式,该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等,具体设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库。 UI设计师应该掌握的设计原则 顶部标签分页栏颜色可自定义。在自定义颜色选择中,务必注意保持分页栏标签的可用性、可视性和可操作性。 UI设计师应该掌握的设计原则 2.减少等待,反馈及时:页面的过长时间的等待会引起用户的不良情绪,使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。 启动页加载:小程序启动页是小程序在微信内一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。 UI设计师应该掌握的设计原则 页面下拉刷新加载:在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式,开发者无需自行开发。 UI设计师应该掌握的设计原则 页面内加载反馈:开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载,自定义加载样式都应该尽可能简洁,并使用简单动画告知用户加载过程。 UI设计师应该掌握的设计原则 模态加载:模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。 UI设计师应该掌握的设计原则 局部加载反馈:局部加载反馈即只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面跳动小,是微信推荐的反馈方式。例如: UI设计师应该掌握的设计原则 全局加载反馈:开发者可以参考图中样式,使用标题栏提示加载小程序页面内容的过程。例如: UI设计师应该掌握的设计原则 加载反馈注意事项: 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。 不要在同一个页面同时使用超过1个加载动画。 结果反馈:除了在用户等待的过程中需予以及时反馈外,对操作的结果也需要予以明确反馈。根据实际情况,可选择不同的结果反馈样式。对于页面局部的操作,可在操作区域予以直接反馈,对于页面级操作结果,可使用弹出式提示、模态对话框或结果页面展示。 页面局部操作结果反馈:对于页面局部的操作,可在操作区域予以直接反馈,例如点击多选控件前后如下图。对于常用控件,微信设计中心将提供控件库,其中的控件都已提供完整操作反馈。 UI设计师应该掌握的设计原则 页面全局操作结果——图标型弹出提示:图标型弹出提示适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调的操作提醒,例如成功提示。特别注意该形式不适用于错误提示,因为错误提示需明确告知用户,因而不适合使用一闪而过的弹出式提示 UI设计师应该掌握的设计原则 页面全局操作结果——文字型弹出提示:文字型弹出提示适用于需要轻量化地用文字解释当前状态或提醒不严重的错误。1.5秒后自动消失,不打断流程,对用户影响较小。 UI设计师应该掌握的设计原则 页面全局操作结果——模态对话框:对于需要用户明确知晓的操作结果状态可通过模态对话框来提示,并可附带下一步操作指引。 UI设计师应该掌握的设计原则 页面全局操作结果—结果页:对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。 UI设计师应该掌握的设计原则 3.异常可控,有路可退:在设计任何的任务和流程时,异常状态和流程往往容易被忽略,而这些异常场景往往是用户最为沮丧和需要帮助的时候,因此需要格外注意异常状态的设计,在出现异常时予以用户必要的状态提示,并告知解决方案,使其有路可退。 要杜绝异常状态下,用户莫名其妙又无处可去,停滞在某一个页面的情况。上文中所提到的模态对话框和结果页面都可作为异常状态的提醒方式。除此之外,在表单页面中尤其是表单项较多的页面中,还应明确指出出错项目,以便用户修改。 异常状态——表单出错:表单报错,在表单顶部告知错误原因,并标识出错误字段提示用户修改。 UI设计师应该掌握的设计原则 便捷优雅 从PC时代的物理键盘鼠标到移动端时代手指,虽然输入设备极大精简,但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化,需要开发者在设计过程中充分利用手机特性,让用户便捷优雅的操控界面。 1.减少输入:由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计小程序页面时因尽量减少用户输入,利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。 例如下图中,在添加银行卡时,采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ,充分利用这些接口将大大提高用户输入的效率和准确性,进而优化体验。 UI设计师应该掌握的设计原则 除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要是键盘输入。 UI设计师应该掌握的设计原则 2.避免误操作:因为在手机上我们通过手指触摸屏幕来操控界面,手指的点击精确度远不如鼠标,因此在设计页面上需点击的控件时,需要充分考虑到其热区面积,避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时,往往就容易出现这样的问题。 由于手机屏幕分辨率各不相同,因此最适宜点击像素尺寸也不完全一致,但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中,各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配,因此再次推荐使用或模仿标准控件尺寸进行设计。 3.利用借口提升性能:微信设计中心已推出了一套网页标准控件库,包括 sketch设计控件库 和 Photoshop设计控件库,后续还将完善小程序组件,这些控件都已充分考虑了移动端页面的特点,能够保证其在移动端页面上的可用性和操作性能;同时微信开发团队也在不断完善和扩充微信小程序接口,并提供微信公共库,利用这些资源不但能够为用户提供更加快捷的服务,而且对页面性能的提高有极大作用,无形之中提升了用户体验。 统一稳定 除了以上所提到的种种原则,建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性,在不同的页面尽量使用一致的控件和交互方式。 统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标,减轻页面跳动所造成的不适感。正因如此,小程序可根据需要使用微信提供的标准控件,以达到统一稳定的目的。

iOS设计原则

清晰 整个系统中,任何字号的文字都必须清晰易读,图标表达含义准确易懂,修饰恰到好处,以功能驱动设计。留白、颜色、字体、图形和其他界面元素能够巧妙地突出重点内容并传达交互性。 1.使用留白:留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受,它可以使一个应用看起来更加聚焦和高效。 UI设计师应该掌握的设计原则 2.让颜色简化UI:使用一个主题色——比如Notes中用了黄色——高亮了重要区块的信息并巧妙地用样式暗示可交互性。同时,也让应用有了一致的视觉主题。内置的应用使用了同系列的系统颜色,这样一来,无论在深色或浅色背景上看起来都很干净,纯粹。 UI设计师应该掌握的设计原则 3.通过使用系统字体确保易读性:iOS的系统字体(pingfang)使用动态类型自动调整字间距和行间距,使文本在任何尺寸大小下都清晰易读。无论你是使用系统字体还是自定义字体,一定要采用动态类型,这样一来当用户选择不同字体尺寸时,你的应用才可以及时做出响应。 UI设计师应该掌握的设计原则 4.使用无边框的按钮:默认情况下,所有的栏(bar)上的按钮都是无边框的。在内容区域,通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时,按钮可以显示较窄的边框或浅色背景作为操作响应。 UI设计师应该掌握的设计原则 顺应 流畅的动效和清晰美观的界面有助于用户理解内容并与之交互, 且不会干扰用户。当内容占据整屏时,半透明和模糊处理通常会暗示 他更多的内容。减少使用边框、渐变和阴影,使界面尽可能轻量化, 从而突显内容。 纵深 清晰的视觉层和生动的动效赋予界面层次感,使其富有活力并有助于理解。使可触发界面元素更容易被找到能提升体验的愉悦感, 让用户在触发相应功能或者获取更多内容时不至于茫然无措。当用户 浏览内容时,流畅的过渡能够提供纵深感。 iOS的延展原则有以下6条: 1.整体美感 2.一致性 3.直接操纵 4.反馈 5.隐喻 6.用户控制 1.整体美感:整体美感体现在一款 App 的视觉外观、交互行为与其功能结合的优异程度。例如,一款协助用户完成重要任务的 App 应该使用不易察觉且不会造成干 扰的图形、标准化控件和可预知的交互行为,从而使用户聚焦在任务本身。反之,一款沉浸式体验的 App(如游戏),需要提供一个有吸引力的界面, 在鼓励用户探索的同时为用户带来无穷的乐趣和激动。 2.一致性:一致的应⽤程序通过使用系统提供的界⾯元素,众所周知的图标,标准文本样式和统一术语来实现熟悉的标准和范例。该应⽤程序以⼈期望的方式结合了功能和行为。 3.直接操纵:屏幕内容的直接操作吸引⼈并促进理解。用户在旋转设备或使⽤用⼿手势影响屏幕内容时会遇到直接操作。通过直接操纵,他们可以看到他们行动的直接,明显的结果。 4.反馈:反馈能够响应交互操作,呈现结果,便于用户了解情况。系统自带的 iOS 的App 对用户的每个操作都提供了明确的反馈。 · 交互元素在点击时会被高亮显示 · 进度指示器显示了需要长时间运行的操作进度 · 动效和声音使用户能够更清晰地感知交互行为的结果 5.隐喻:当一个 App 的虚拟对象和行为与用户所熟悉的体验相似时——无论这种体 验来源于现实生活亦或是数字世界,用户就能够更快速地学会使用这款App。隐喻在 iOS 中能够起作用是因为用户与屏幕在进行物理上的交互。 · 可以通过移动分层视图来显示被遮挡的内容 · 可以拖拽并滑动对象 · 可以切换开关,移动滑块,滚动数值选择器 · 可以通过轻扫来翻阅书籍和杂志 6.用户控制:在 iOS 中,用户是决策者,而不是App。App可以对用户行为提出建议,对 可能造成严重后果的行为发出警告,但不应该直接替用户做决策。优秀的 App在用户主导和避免不想要的结果之间找到平衡。为了让用户拥有掌控性, App可以使用用户熟悉且可预知的交互元素,让用户二次确认破坏性的行为, 并且保证可以停止正在执行中的操作。

Material Design 设计原则

详情请查看Material Design 设计指南中文网站:www.mdui.org Material 是一种隐喻 通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一灵感来自我们对纸墨的研究,但是我们相信,随着科技的进步,应用前景将不可估量。 实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。 光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系,以及单个物体的运动。 UI设计师应该掌握的设计原则 鲜明、形象、深思熟虑 新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。 Material Design设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。 UI设计师应该掌握的设计原则 有意义的动画 动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。 动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。 动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。 UI设计师应该掌握的设计原则 作者:Echo 公众号:Echo的设计笔记 封面:设计达人(公众号)


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/ui-sheji-yuanzhe.html/feed 0
阿里云主机不能装wordpress,出现Internal Server Error解决方法 http://www.shejidaren.com/aliyun-zhuji-anzhuang-wordpress.html http://www.shejidaren.com/aliyun-zhuji-anzhuang-wordpress.html#respond Sat, 28 Dec 2019 10:31:36 +0000 http://www.shejidaren.com/?p=34207 阿里云主机不能装wordpress,出现Internal Server Error解决方法

想必很多设计师都想拥有自己的博客,用来发布自己的设计作品或者撰写一些自己的经验笔记,同时为了节省成本,一般都使用虚拟主机即可,并且直接使用现成的wordpress主题,就能建立一个小博客。小编最近帮一名设计师安装一个Wordpresss设计博客,却出现了一些小问题,在阿里云主机安装WP时,出现Internal Server Error这个错误,如下图: 阿里云主机不能装wordpress,出现Internal Server Error解决方法 提交工单联系客服也没有解决,浪费了一大堆时间,经过一翻折腾,发现解决方法原来非常简单,在这里分享给大家,如果出现同类问题,可以参考这个解决方法。 步骤 1. 进入阿里云虚拟主机控制台,然后进行「数据库信息」面板。 阿里云主机不能装wordpress,出现Internal Server Error解决方法 2. 点击面板右边的「变更数据库」,在弹出窗口选择MySQL 5.7 或更高版本,然后点确认,最后,还要点击「重置密码」,这一步要注意。 阿里云主机不能装wordpress,出现Internal Server Error解决方法 3. 这是最后一步,在高级环境设置的「PHP版本设置」,选择PHP5.5以上即可。 阿里云主机不能装wordpress,出现Internal Server Error解决方法 就这样几步,就完成了WORDPRESS的安装,可以说是非常简单。 今天就分享到这里,设计师们有什么问题或需要安装博客,可联系设计达人帮忙哦,欢迎大家一起交流。


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/aliyun-zhuji-anzhuang-wordpress.html/feed 0
金色2020年字体元素 http://www.shejidaren.com/jinse-2020-ziti-yuansu.html http://www.shejidaren.com/jinse-2020-ziti-yuansu.html#respond Sat, 28 Dec 2019 00:00:33 +0000 http://www.shejidaren.com/?p=34197 金色2020年字体元素

2020的字体设计元素,用来做大标题字体是相当不错呢,字体使用气球风格,并运用金色作为主色调,看起来很有气氛的感觉,用来做新年素材非常合适。 在做海报设计、贺卡等平面设计印刷品也适用。EPS矢量格式。同时还有一个牛奶背景,很可爱。旁边使用了金色的碎纸作为点缀物,气氛爆棚。 金色2020年字体元素 金色2020年字体元素 金色2020年字体元素 金色2020年字体元素 这就是今天分享的2020新年用的字体元素,希望大家喜欢。

下载素材

素材分辨率:5500px * 3570 px 素材格式:.EPS(用AI打开即可) 素材大小:17.41MB 素材版权:免费使用 下载地址:https://pan.baidu.com/s/1fMJWJgAFeNdaORmpO7YzAg 提取码: h6fd


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/jinse-2020-ziti-yuansu.html/feed 0
正版字体这样改,就能免费无版权 http://www.shejidaren.com/zhengban-ziti-xiugai.html http://www.shejidaren.com/zhengban-ziti-xiugai.html#respond Fri, 27 Dec 2019 03:04:58 +0000 http://www.shejidaren.com/?p=34165 正版字体这样改,就能免费无版权

前言:没多少家公司用得起正版字库,所以设计师用字时都要小心翼翼,搞不好让公司赔个几万块就完蛋啦。今天设计达人为大家分享一份正版字体修改指南,只要按这些方法思路去改字体,就可以免费使用正版字体,而且不会受侵权风险,下面将通过3个案例,为大家讲解中文字体修改方法,都学起来哦! 正版字体这样改,就能免费无版权

案例1

正版字体这样改,就能免费无版权 上图,是“我型我塑”四个中文字体,先演示错误的“修改”方法,也就是“修改”之后,依然会构成侵权的方法: 正版字体这样改,就能免费无版权 …… 可以看到,在上面6种“修改”方法中,我都打上了清晰的红色禁止符号,因为这并不是真正的修改,这些微弱的调整,对于原字库本身,没有本质的改善,所以,也还是会很容易导致侵权。相对于这些“小”的调整,那么,我们就很自然的得到了与之相对的另一个 答案:大改! 接下来我分享所谓“大改”的技巧,还是以这四个字为例: 正版字体这样改,就能免费无版权 在第4步的修改中,着重对横线笔画的左右端点进行了加法设计。 正版字体这样改,就能免费无版权 和第4步较为类似,第5步的设计,主要是为了突出字形的独特性,使其具备更鲜明的创意和新鲜感,也就更容易摆脱原字库的束缚和框架。 正版字体这样改,就能免费无版权 修改到此步之后,就可告一段落了,我们先看一下前后对比效果: 正版字体这样改,就能免费无版权 几个步骤的动态图,看起来会更直观一些: 正版字体这样改,就能免费无版权

案例2

正版字体这样改,就能免费无版权 修改步骤如下 正版字体这样改,就能免费无版权 在上述第2、3、4步的修改中,从多个角度改变了原字体的设计细节,从而会赋予字体更显著的设计感,更接近于我们自己亲手设计的字体。 正版字体这样改,就能免费无版权 在第5步中,要根据字体意义和笔画环境,加入恰当的图形创意,这里边也有很多原则或技巧,如果处理得当,会让你的字体更加有趣,更吸引眼球。 修改到这里,基本完成,先看一下前后对比效果: 正版字体这样改,就能免费无版权 整个修改步骤的动态图: 正版字体这样改,就能免费无版权

案例3

正版字体这样改,就能免费无版权 修改步骤如下 正版字体这样改,就能免费无版权 第3步的修改,已经非常接近于重新设计了,是改变最狠、最明显的一步,对多处笔画进行了“整容变身”,比如以下几处细节: 正版字体这样改,就能免费无版权 字和字之间的连笔设计,也是极为通俗实用的套路之一,可以让字体更具整体感,更连贯,更有气势。 正版字体这样改,就能免费无版权 改到这里,应该算是圆满的完成任务了,再看一眼前后对比效果: 正版字体这样改,就能免费无版权 整个修改过程的动态图如下: 正版字体这样改,就能免费无版权 总结 以上,三个不同的字库修改案例,主题不同,所选取的字库不同,修改字库的方法也就各有差异,而细细分析这些差异,其中也有很强的规律性,接下来,我从一“大”一“小”两个方面进行总结: 正版字体这样改,就能免费无版权 大,即宏观方面,主要是以下三点: 1、修改原字库整体的长宽比; 2、修改原字库中横竖撇捺的粗细宽度; 3、修改原字库的重心。 这些,都是从大的方面,对字体外部轮廓进行大刀阔斧的变动,粗暴而干脆。 为便于理解,针对上述三点,我大致画了一些示意图: 正版字体这样改,就能免费无版权 改变字体比例,如上图,对原字库进行了压扁处理 改变笔画宽度,如上图,原字库的横竖线,都变得更细了一些 正版字体这样改,就能免费无版权 改变字体重心,如上图 正版字体这样改,就能免费无版权 上调了原字库字体的重心,字体变得上紧下松。 当对字库字体进行了这番修改之后,也就相当于对一个人的骨架进行了重新规划,对高矮胖瘦进行了完全颠覆性的重塑。在第一印象上,已经与原字库字体有了清晰的形象划分,但,这远远不够,还不是那么的“保险”,所以,我们需要在“小”的方面,继续深入下去,对字库进行更全面的,更细微的“整容”,接下来,我们拿起“手术刀”,了解又该如何从“小”处着手。 正版字体这样改,就能免费无版权 相对于“大”的修改而言,“小”的修改,意味着更精细,更有难度,更能体现你的创意和功夫。在正文的三例修改案例中,回顾总结一下,分别有以下这些操作: 1、笔画的曲直变化,由曲变直,或由直变曲; 2、在笔画端点处执行加法设计,添加细节之处的个性; 3、相邻笔画的连笔或断笔设计,让字体变化更多; 4、在笔画的衔接处,施加圆角(倒角)设计; 5、字和字之间的连笔处理,让独立的字体,形成连贯的字组; 6、图形创意的添加,根据词意环境和笔画环境,融入恰当图形。 我分别针对上述前5点,画一些简单的示意图: 1,上图所示,笔画由直变曲 正版字体这样改,就能免费无版权 2,上图所示,横线左右端点的细节设计 正版字体这样改,就能免费无版权 3,上图所示,口字形左上角的断笔或切割 正版字体这样改,就能免费无版权 4,上图所示,口字形左上角右下角的内外倒角设计 正版字体这样改,就能免费无版权 正版字体这样改,就能免费无版权 5,上图所示,前后两个字之间的“连笔”设计 写到这里,是必须要多说几句的,以上这些,都是纯粹的个例演示,万万不可理解为只有这几种修改方法,这些只是很容易想到、容易实现的常见方法而已,希望我的举例,不会阻碍大家产生新的联想和构思,也希望大家能够打破常规,改出更合适、更好看的字体。 结语 正版字库的修改教程大概这样,这是一种快捷的字体设计方法,比起设计全新字体更加简单便捷。对初学者而言可能看起来也非常「麻烦」,但这已是最好用的捷径,大家可当作是造字练习,同时解决字体侵权的风险,一举两得的事,等熟练之后,再创建属于自己字体。


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/zhengban-ziti-xiugai.html/feed 0
刚铁金属质感字体设计教程 http://www.shejidaren.com/jinshu-zhigan-ziti-sheji-jiaocheng.html http://www.shejidaren.com/jinshu-zhigan-ziti-sheji-jiaocheng.html#respond Thu, 26 Dec 2019 02:31:58 +0000 http://www.shejidaren.com/?p=34149 刚铁金属质感字体设计教程

金属字体给人的感觉是很有冲击力,很多战争、格斗类的电影大片都喜欢使用,同时设计达人认为这种字体非常实用,比如笔记本电脑、剃须刀、音箱、鼠标、机器键盘、等等电子产品,只要突出金属、刚铁、强大、强悍、坚硬等主题气质时,都可以使用刚铁质感字体,让画面更真实融合。今天我们以「战狼II」作为字体范例,教大学如何设计出有刚铁质感的字体教程,使用Photoshop软件制作,设计过程简单易懂,同学们来一起学习吧。 效果图: 刚铁金属质感字体设计教程 平面字体效果: 刚铁金属质感字体设计教程 加入到海报的效果: 刚铁金属质感字体设计教程 准备软件:Photoshop 步骤 1、在字体库找一个硬朗一点的字体,符合战狼的气质。 刚铁金属质感字体设计教程

图1

2、把字体变成红色,稍微拉长一点,然后锁定它。我们可以在它上面描出我们需要的字体,然后加,上英文。 刚铁金属质感字体设计教程

图2

3、对字体进行变形,为了突出“战狼”的锐利感,加了尖角。狼的最后一笔也用了一把刀。 刚铁金属质感字体设计教程

图3

4、处理字体的细节,使字体更加耐看,然后加上“II”,别急,我们开始做立体效果啦。 刚铁金属质感字体设计教程

图4

5、开始对字体进行初步立体化(用ps图层样式)完成后,看起来很不好看,立体感觉不够强,我们继续。(立体效果主要用斜面与浮雕制作出来,参数根据字体大小调整,这一步要自己多尝试) 刚铁金属质感字体设计教程

图5

6、为了使字立体感更强,光阴看着更舒服,我们需要对字体进行细节修饰,我是用钢笔工具重新勾勒出每一个面,增加一些立体面,这样线条更和谐。 刚铁金属质感字体设计教程

图6

7、开始添加材质,可以往上找些生锈铁皮材质,然后放在字体上面,选择正片叠底,然后添加剪贴蒙板即可。 刚铁金属质感字体设计教程

图7

8、添加高光,使字体立体感,质感更强,更加尖锐。并添加破损效果。 刚铁金属质感字体设计教程

图8

9、刻画细节,使某些亮面更亮,暗面更暗些,然后添加条纹纹理,金属感更强,然后加上子弹头效果,完成。 刚铁金属质感字体设计教程

图9

向战狼2致敬~ 刚铁金属质感字体设计教程 总结 关于金属字体的教程和设计思路大致就这样,同学们可以根据自己的海报主题,继续深化字体,特别是在每一步「型」要做对,不要做成软棉棉的字体,这不符合金属字体的气质。​ 作者:零耀 个人主页:zcool.com.cn/u/691223


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/jinshu-zhigan-ziti-sheji-jiaocheng.html/feed 0