小技巧 颜色 快速 大家好,这里是和你们聊设计的花生~之前和大家分享了 4 期提升 Ai 文本排版效率的小技巧,很多小伙伴都说非常实用。这段时间我又学到了不少新的 Ai 小技巧,冷门但可以有效简化一些操作步骤,今天就先整理其中五个分享给大家~往期回顾:掌握这5个Ai小技巧,帮你快速提升文字排版效率(四)大家好,我是和你们聊设计的花生~今天继续为大家带来 Ai 排版技巧第四期,这期主要和大家分享 5 个与长文本排版相关的实用小技巧,一起来看看吧~上期回顾:1. 设置网格并转换为参考线在进行折页或者画册设计时,为了保证版面的整洁有序、信息清晰传达,设置网格是必然可少的一步。阅读文章 > 一、快速切换填色模式之前想填充渐变色时,我都是用鼠标在左侧工具栏里点击渐变色,后来发现其实纯色、渐变和无填充三个选项都有快捷键,分别是""、"/",也就是半角键盘状态下的逗号、句号和顿号键。选择对象后使用快捷键可以快速在三种状态间切换,比鼠标操作更方便。二、内部绘模式Ps 里的“剪切蒙版”可以让顶部图层的内容局限在底部图层内部,其实在 Ai 里面也有一项功能可以实现同样的效果,就是“内部绘图”模式,快捷键为 Shift+D。使用这个快捷键可以在“正常绘图”、“背面绘图”和“内部绘图”三种模式间快速切换,满足不同的绘图需要。(进入内部绘图模式后对象四周会出现虚线标记,如果内部绘图模式无法选取,可以右键选择“取消编组”或“释放剪切蒙版”)。三、快速切换边角样式Ai 里的边角样式有“斜接”“圆角”和“斜角”三种,通常是点击顶部工具栏里的“描边”选项进行修改。其实边角样式也有快捷键,具体的操作方法为:用直接选择工具选中需要修改的边角,在鼠标右下角出现小标记时,按住 Alt 键再次点击这锚点,就能在这三种样式中快速切换了。四、吸取局部颜色使用吸管工具吸取其他对象的颜色时,会将该对象的颜色完全复刻过来。如果我们想只取其中一种颜色,可以在取色的时候按住 Shift 键。用这种方式我们可以只吸取渐变色中的一种,或者只吸取描边的颜色。(Tips:通常我们先选中 B,然后用吸管工具去吸取 A 的颜色,则 B 的颜色变成和 A 一样。如果我们选中 B 后,按住 Alt 键用吸管工具点击 A,那会变成 A 颜色和 B 一样。)五、矩形橡皮擦再给大家介绍一个有关橡皮擦工具的新用法。Ai 里的橡皮擦是圆形的,用它来擦除形状时边缘总留下弧形,如果想让橡皮擦变成方形,可以在使用的时候按住 Alt,就能像拉取矩形选框一样删除不需要的部分。以上就是为大家推荐的 5 个冷门但实用的 Ai 小技巧,赶快打开软件亲手操作一遍吧 ~ 喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~推荐阅读:简单又实用!5种设计师必学的海报设计装饰元素(三)大家好,这里是和你们聊设计的花生~今天继续为大家带来海报设计常用 装饰元素 的第 3 期,本期的元素分别是:英文字体、中心辐射线、心形、镭射风及卡通风贴纸和渐变波点,并有超多实用教程和免费可商用资源分享给大家,一起来看看吧~上期回顾:一、英文字体英文字体在海报设计中很常见阅读文章 > 让版式更好看!7个字体排版设计小技巧今天这篇文章比较偏基础,但胜在讲的很全面,自己做项目的时候也可以拿来自检。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/5-ai-tips-5
图标 入口 快速 编者按:本文从组件介绍、使用场景、设计要点、样式拓展4个方面,帮你快速熟悉UI组件中的金刚区设计。上期回顾:新手科普!4个方面帮你快速熟悉UI组件中的瀑布流编者按:本文从组件介绍、使用场景、设计要点、样式拓展4个方面,帮你快速熟悉UI组件中的瀑布流设计。阅读文章 > 一、组件介绍快速入口 (Quick Links / Quick Access),国内也会用颇具东方特色的「金刚区」来称呼。在一个结构比较复杂的 APP 首页或者主页面中,快速入口往往扮演着功能导航、曝光和引流的运营角色,通常表现为一组有序排列的图形入口。快速入口不管是位置还是权重都处于页面的中心地带,所以设计时需要格外注意基础和细节。这里我会介绍一些快速入口通用且基础的设计方法,但因为这个组件变化非常多样,所以可能无法面面俱到。诸如更符合页面需要的布局方式,以及图标如何绘制等,这些将是大家需要长期打磨练习的地方。二、使用场景当一个页面内除开本身需要承载的内容之外,还需置入超过四个功能模块的入口时,我们就可以考虑使用快速入口这个占用空间小,信息密度大且美观的入口展示形式,故而在多数 App 中快速入口集中出现在主页和个人页;而在诸如美团、大众点评等综合性更强的 App 中,下级分类页面也会使用快速入口。所以总结下来,快速入口大多出现在:首页、下级主页、个人页这三个地方。快速入口在页面中的地位应该无需赘述,各位用多了 APP 也能总结出它常常出现在主要页面中中间靠上的核心区域。如果有 Banner,则通常会出现在 Banner 下方,如果没有 Banner,则会直接置于标题栏下方。三、设计要点1. 布局方法① 页面内等分等分的快速入口可以表现为一个 (1~3)行 (4~5)列的矩阵,6 列的也有(起点精选页),但是比较不常见。设计时我们优先确定每个背景视图的尺寸,如何确定呢?首先是宽度,单个视图的宽度具体是多少其实并不重要,重要的是总宽度,即 390 减去页面两侧边距的大小(边距不固定,根据实际情况设置),再用这个数值除以列数,这就是背景视图的宽度。高度则需要根据图标和文字区域的总高来确定,例如图标 (包含安全区域或几何背景) 为 4444pt,文字段 12pt 苹方默认高 17pt,图标和文字之间给 4pt 间距,上下边距 8pt,那么视图的总高就是 44+17+4+82=81pt。当然高度这一项中,上下间距的自主性比较大,你也可以选择留更小或更大的间距来调节矩阵在视觉上的松紧程度,尤其是多行矩阵,更需要注意上下行之间的远近,这会影响观感。总之一切都以设计师预期的视觉效果为准。② 超范围滚动尽管大多数等分的入口矩阵同样可以采用多分页滚动的形式 (淘宝、京东),不过我们这里说的超范围滚动则更接近于滚动卡片那种非等分的,会在最右侧边界被裁断的形式,例如网易云、Keep。在这种布局下,我们需要优先确定图标与图标之间的间距,将它们调整到第一屏有 4 至 5 个,且默认露出下一个图标的一部分。最左侧的图标与其余页面元素左对齐即可。③ 主副型布局有些 APP 需要更加明确地区分入口的权重,则会采用强弱对比的主副型入口,主副型入口属于等分的一种,两类入口的背景视图可以不同高且不同宽 (支付宝),也可以同高也高宽 (马蜂窝)。在实际设计过程中,按照等分的规则各自确定两类入口的背景视图区域即可。2. 视觉形式① 图标 / 文字我们日常使用的绝大多数 APP 都采用了上图标下文字的视觉形式,这种形式具有更普遍的适用性。② 卡片形式之前在瓷片区的文章中有提到过,一些快速入口会像瓷片区一样做成卡片拼贴的样式,指的就是如下图所示的这种视觉形式。卡片形式的入口对图形设计能力要求颇高,尤其是几个权重最高的入口,由于快速入口只能使用图形来修饰内容,为了匹配这几个入口的权重,设计师往往需要绘制精细度比一般图标更高的插画,所以我并不推荐新手尝试这种样式。③ 主副形式与主副型布局相对应的视觉形式,通常会采用不同类型的图标来表达不同的权重,权重高者往往使用更精细的插画图标,权重低者则使用基础的线性、面性或线面混合图标。而像支付宝、美团这样的 App,反而使用最简单的线性图标来表达功能之核心,之基础;权重则使用不同的背景色来物理区分。3. 图标类型① 基础渐变在基础图形上加入了同色相不同明度的渐变,就可以做出一套简单、够用的快速入口图标,尽管不适合风格化强烈的 App 页面,但胜在通用性强,首页、个人页都能采用。② 几何背景指的是图标拥有一个圆角矩形或者圆形的纯几何背景,实际图标则一般使用纯色或渐变。这种类型的图标好处是更容易做到视觉大小的统一,并且由于实际图标方面不需要太多的修饰,设计起来也更加简单。不过几何背景的图标也有进阶的变体,背景上可以做成不规则形状,图标上也能加入更多细节 (甚至 3D),总之能做得非常花哨,例如美团外卖的入口图标:③ 色彩交叠因图标中存在重叠的两部分而使得这部分色彩更深。这个类型的图标本质上与渐变没有区别,都是色彩运用的一种手段,只不过交叠类图标使用得比较少见,所以会相对更具辨识度。④ 扁平插画在图标中直接使用插画,自由度更高的同时,风格化也更明显,非常有利于品牌风格的塑造,唯一的缺点是对设计师的要求相对偏高。对插画来说,纯扁平或是微渐变都是可以的,前者更易表达场景,后者则往往会有更加立体的观感。⑤ 玻璃拟态近年来大火的风格化设计之一,做起来简单却很有视觉效果。特征是图标中的会出现两个上下关系的层级,下层往往采用渐变或纯色的色块,上层图形则会模拟亚克力、云母、磨砂玻璃的质感。具体做法为背景模糊,以及为自身边缘添加高光描边。近年来越来越多的在主流 App 中出现,例如飞猪、站酷。实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标,以及在这基础上如何发散创意。阅读文章 > ⑥ 实物图片实物图片一般多用于电商类 APP,在进行商品分类时会直接采用特征典型的商品,优点是比图标更直观、易辨认,缺点是对图片的要求较高,对视觉大小统一的调整也需要更加细致。当然,人像也算是实物图片的一种,多用于影视类 App。除了上述 6 个比较常见的分类,快速入口这个区域的图标还有很多奇特的类型,例如 2.5D 轴测图、文字类、3D 类,甚至多种类型图标混合使用等等。因组件本身的设计开放性极大,几乎没法全部涵盖到。所以图标类型方面的知识,还需要大家自己在工作和学习中慢慢积累。四、样式拓展1. 自如自如 APP 的快速入口设计向来别出心裁,值得大家一直放在手机里观察它的设计改版。自如在这一版本中,将 12 个格子其中的两个格子合并成了一个宽格,既强调了这个格子的内容,又让这三行图标发生了一定变化,不至于枯燥。2. 起点在快速入口中加入动效听起来是个很多余的做法,因为对这些图标的交互几乎没有观察后续反馈的必要(都直接跳到另一个页面了)。不过起点在这里做了一个动效的示例——在某个你想强调的图标中加入循环动效,可以起到吸引用户注意力的作用。3. 其他样式结尾快速入口的组件就介绍到这,后续所有有关组件的介绍都会同步更新!本篇来源:优设网原文地址:https://www.uisdc.com/quick-links