首页

探究UI设计中形状的创意与应用

前端达人

形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式,可以创造出令人愉悦、易于使用和富有吸引力的界面。

写在前面

在UI设计中,形状设计是一个至关重要的环节。对其选择和排列会直接影响到界面的美观度和用户的交互体验。接下来将详细探讨UI设计中的形状设计,包括其重要性、基本原则和实际应用。

 

形状可以帮助用户理解和操作界面。一个优秀的形状设计应该具有清晰、简洁和易于理解的特点,我们在平时做设计中,需要将这些原则深入到每一个细节中。

在设计中,形状的识别和理解是至关重要的。一个成功的形状设计应该能够快速地被用户识别并理解。例如,一个常见的形状可以使用不同的颜色和大小来区分主要内容和次要内容,从而引导用户的注意力。

 

1、形状的一致性

在UI设计中,一致性是一个非常重要的原则。一个好的形状设计应该在整个应用程序中保持一致,从而使用户可以轻松地导航和操作。例如,闲鱼APP里的所有的按钮可以使用相同的形状和颜色,以便用户可以轻松地识别并操作。

 

2、形状的个性化与品牌识别

一个独特的形状设计可以帮助品牌在竞争激烈的市场中脱颖而出。一个好的形状设计应该能够体现品牌的个性和价值观,从而增强品牌的识别度。使用独特的图标和标志来传达其品牌形象和价值观。例如:小米的logo、京东狗、淘宝天猫。

 

1、按钮设计

按钮是UI设计中最重要的元素之一。一个好的按钮设计应该具有清晰的形状和易于理解的标签。

按钮形状主要有直角、小圆角、全圆角三种样式。

① 直角按钮具有严谨、力量、高端的特点,适用于大牌美妆、奢侈品类产品;

 

② 小圆角按钮具有稳定、中性的感觉,适用于用户跨度较大的常规类产品中,例如微信、滴滴、抖音等;

 

③ 全圆角按钮更加温和、亲切,适用于电商类和儿童类的产品中。

 

按钮尺寸和比例根据iOS和Android的规范,按钮尺寸至少高于5.5毫米(36 pt),否则用户点击时会较为困难。同时,按钮长度固定,文字长度变化或是按钮长度根据文字长短而变化的设计方式也需要考虑文字距离按钮上下左右边距的比例关系。

总的来说,UI中按钮形状的设计需要结合具体的产品属性和界面风格,以及用户的使用习惯来进行综合考虑。

 

2、图标设计

图标是UI设计中另一种重要的具有高度概括性和视觉传达性的小尺寸图像元素。可以帮助用户快速地识别和理解功能和信息,是靠文案无法实现的。

例如,天气图标通过其形状、色彩和设计元素直观地传达不同的天气状况和气象信息,帮助人们更好地了解天气状况。又如卫生间男女图标的设计让人们易于识别和理解。

 

在UI设计中,图标的圆角度通常是怎么定义的呢?

① 大圆角:应用在以圆润、可爱为主要风格的UI设计中,以营造出更加柔和、亲切的视觉效果。

② 小圆角:小圆角作为一种微妙的细节元素,可以增加图标的层次感和细节。在追求设计质感的界面中,适当添加小圆角可以使图标更加精致和有品质感。

③ 无圆角:应用在科技或现代感的UI设计中,以营造出更加硬朗、冷峻的视觉效果。但使用需要克制,过多的直角可能会让整个界面显得生硬和冷感。

补充一点,我发现一个重要细节,就是很多人在计算内圆角数值时都存在困扰。自工作以来,我注意到这个问题影响了很多人,他们不知道如何正确地计算内圆角的数值。为了解决这个问题,通过以下方式帮助大家更好地掌握计算内圆角数值的方法。

 

3、输入框设计

输入框是用户输入信息的重要区域。在UI设计中,输入框的形状设计可以根据实际需求和设计风格进行变化。以下是一些常见的输入框形状设计:

① 方型输入框:这是最常见的输入框形状,它以方形的形式呈现,可以在其中输入文本或信息。这种设计简单明了,易于使用,适用于大多数场景。

② 圆角矩形输入框:这种输入框在四个角上采用了圆角设计,使得整个输入框看起来更加柔和、友好。这种设计在一些需要强调用户输入的场景下较为常见。

③ 下拉菜单输入框:这种输入框可以让用户从下拉菜单中选择一个选项,而不是直接在文本框中输入。这种设计适用于一些固定选项的场景,可以减少用户的输入操作。

④ 按钮式输入框:这种输入框将输入框和按钮结合在一起,用户可以点击按钮来输入信息。这种设计适用于一些需要强调点击操作的场景,例如站酷的登录。

⑤ 语音识别输入框:这种输入框允许用户通过语音来输入信息,而不是手动输入。这种设计适用于一些需要快速输入或不方便手动输入的场景,例如驾车、写字等。

总的来说,输入框的形状设计应根据实际需求和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。

 

4、导航栏设计

导航栏是UI设计中重要的组成部分之一。它帮助用户在不同的页面之间进行切换和导航。在设计导航栏时,应考虑其位置、颜色和形状等因素。以下是一些常见的导航栏形状设计:

① 顶部导航栏:这是最常见的导航模式,位于页面顶部,可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计简单明了,易于使用,适用于大多数场景。

② 侧边导航栏:这种导航模式位于页面左侧,通常用于二级导航或辅助导航。侧边导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

③ 底部导航栏:这种导航模式位于页面底部,通常用于一级目录的导航。底部导航栏可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计操作方便,用户体验好,适用于大多数场景。

④ 弹出式导航栏:这种导航模式通常用于移动端应用,通过点击或滑动屏幕上的按钮或图标来唤出导航菜单。弹出式导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

总的来说,导航栏的形状设计应根据实际的导航模式和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。好的导航设计应该简单明了、易于使用,能够提供清晰的信息架构和层级关系,帮助用户快速找到所需内容。

 

5、作为底纹设计

将形状用作底纹,可以增加图形的视觉层次感和趣味性。尤其是当使用如圆圈、条纹、曲线等形状时,可以使底纹呈现出动态感和动感。

也可以强调文字或图片中的某些元素,用来引导观者的视线,以创造出视觉焦点。比如,在一个沉闷的黑色背景上使用鲜艳的彩色形状作为底纹,可以将观者的注意力集中在那些形状上。

但是,必须着重强调的是,底纹的使用应当与整体的设计风格和主题相得益彰。若应用不当,可能会对画面的整体美感产生破坏性的影响。因此,在决定是否使用底纹时,必须慎重考虑其与整体设计的和谐度。

 

1、动态形状设计

随着技术的不断发展,动态形状设计已经成为一种趋势。通过使用动画和过渡效果,可以创建更具吸引力和互动性的界面。例如,使用渐变效果来平滑地转换不同的页面或状态。

 

2、3D和立体形状设计

3D和立体形状设计为UI设计师提供了更多的可能性。通过使用阴影、光照和深度效果,可以创建更立体、更有层次感的界面。例如,使用3D旋转效果来突出主要内容或使用阴影效果来增加界面的深度感。

 

3、可定制形状设计

随着用户对个性化需求的不断增加,可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如,允许用户自定义选择自己喜欢的页面主题风格。

 

总结

在UI设计中,精美形状设计的关键是深入理解用户需求,注重细节,保持一致性,勇于创新,不断提高技能水平。这样才能创造符合用户口味的界面,提升用户体验。简洁地说,好的形状设计来源于用户需求、细节、一致性、创新和自我提升。

以上总结仅代表个人观点,如有不足欢迎大家补充互相进步。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发



作者:散落的那些
链接:https://www.zcool.com.cn/article/ZMTYwMTYyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

图形的设计妙用

涛涛

容易被忽视的图形,不仅能传达不同的情绪,也能提升视设计的品质感。

本文节选自德国红点获奖设计师大凡的分享,主要包括三个部分:

1 图形是什么

2 好的图形设计长什么样

3 图形设计创意思路分享


1 图形有多样化的表达方式

提到图形设计,你脑海中对应到的第一个画面是什么?我们打开了某搜索器,检索了「图形」二字,这里的图形多集中于「几何图形、标志、矢量图形、图标」。

我们又搜集了一些不错的设计网站,搜索「图形设计」或「graphic design」,它的表现形式与应用范围都扩大了,海报、信息、插图、包装、图标、字体、摄影、标志、品牌,无所不在。

如果给图形下个定义,它主要指二维空间中可以用轮廓划分出的空间形状,设计中无处不在的表现手法。它与色彩、版式、字体等一样,在设计师的知识体系中处于相对重要的位置,但往往容易被忽视。


在优秀的设计作品中,图形可以作为主体、符号、辅助、信息等不同角色出现在设计的各个应用场景中,可以通过抽象的、具象的、平面的、空间的多样化表达手法,传达出不同风格的视觉表现力。


2 好的图形设计长这样

那么,好的图形是什么样的?我们可以从3个维度去感受好的图形设计作品:抽象创意风格


① 图形的抽象性

抽象是对日常事物的提炼与概括,我们先来感受一下下面两组建筑,某搜索器中的「最丑建筑」和「知名建筑」之间的对比。可以很直观的感受到,抽象的图形与色彩可以传递更加丰富的情感。

对企业来说,沟通成本代表的就是金钱,而一个抽象的符号就能巧妙地为企业节省了很多说话的时间。

我们可以看这个案例,1个点产生了多少可能性?这是美国一家大型连锁超市的logo,以这个点为原型,衍生出了各种解锁生活方式的海报。简单的点,发散出各种生活方式,一看就能够知道超市供应的各种商品。

 


 图形的创意性

设计的创意体现在哪儿呢?我们先看看那些脑洞大开的大师们是如何使用图形的。

第一位是福田繁雄大师,在他的年代没有人用这样的图形方式做设计,炮弹朝向炮筒里面,一张非常简洁的反战海报。他也特别擅长运用图形的异形同构。

第二位是瑞士的史蒂芬邦迪大师,这些是他为剧场设计的宣传海报。简单的人形搭配鲜血撕裂感的方式就可以把卡门剧情表达出来了。

创意是天马行空的。我们看下面这个音乐节海报设计,拆解其中包含的文字、吉他、人影、波浪等,每个元素与音乐都息息相关,组合在一起就缺了些创意表达。

再看网易云音乐与快手联合做的民谣音乐节H5,音乐的感觉一下就出来了。

很简单的图形运用,就能产生创意性的差距。 


③ 图形的风格化

著名的可可香奈儿女士曾经说过,流行稍纵即逝,但风格永存。

从包豪斯开始,设计风格发展到今天已经是多元混合存在的,很多所谓流行不过是循环与往复。

即使是运用最简单的图形,也可以表达出不同的风格,甚至引领浪潮,为品牌传播加分。比如,下面这组图,你能猜的到是同一家公司的传播海报吗?

 

3 图形设计创意思路分享

现在,我们感受到了图形的巧妙之处。但具体拿到一个需求后,我们该如何去用图形辅助设计呢?这里分享一个“三步理性创意发散法”。

举个栗子,我们为「夏季青年音乐节」设计一张活动海报。


第一步,分析主题、提取元素。

我们首先给主题做一个分析、把关键词拆解与排序后,视觉的重要程度依次是:音乐、夏季、青年、节日。

这些关键词让你最直观的感受是什么呢?

基于感受,我们可以尝试提取出基础的图形元素了。

色彩方面,我们也可以根据对应的元素去设置,最终我们提取出了这组图形元素。

第二步,对元素进行融合碰撞。

这一步需要我们设计师发挥想象力了,为一组元素找到视觉上的联结关系。这也需要大家平时能去多看、多想、多练。

然后,我们为图形融合进更多的细节。


第三步,构图与完成画面。

我们首先采取最简单的主体式构图方式,将想突出的图形最大化、成为视觉焦点,添加海报所需文字进行排版。

这种方式能够做出相对合格的图形海报,但我们可以用不同的版式与分割构图,去尝试更多的可能性。比如第三个海报,我们可以先建立不一样的版面分割、进行配色,然后再放入图形与文字进行排版,营造不同的画面感觉。

其他两组也可以用这种方式、进行不同尝试。

最后,我们可以整体上对比一下。

 

大师级的创意难得,但基本的图形创意确实有迹可循,希望本次的分享能够给大家带来图形思维上的启发。


文章来源:站酷    作者:站酷高高手

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


创意桌报收集

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


好看的锁骨千篇一律,

有趣的肚腩duang来duang去。

 

11月22日,

那一天,是西方的感恩节,

那一天,也是中国的小雪。

歪果仁感恩上帝的厚德与恩赐,

我只想感谢我身上的秋膘…

它,比秋裤更便利;

它,比暖宝更亲腻;

它,比集体供暖更懂你;

它,比炭盆烧炕来的更容易。

 

感谢久坐,感谢外卖,感谢秋膘,

让尽情放浪在暖冬的我,肥而不腻。



创意周报 – 2018年11月第3周


一周热销图片TOP5


NO.5 图片ID:678491803(点击查看图片)



感恩节将近。

这张垂直视角的感恩节餐桌照片中,

果蔬与肉类食物颜色搭配鲜艳,

木质桌面纹路不抢眼。

很适合作为网页大图、banner、

移动端开屏背景和海报背景等用途使用。



NO.4 图片ID:735764617(点击查看图片)



在国内绝大多数人更熟识双十一,

但“黑色星期五”才是世界范围内的购物狂欢节。

在国内的权重虽然不及双十一,

但是黑五的影响力依旧不可小觑。



NO.3 图片ID:1076345054(点击查看图片)



这张智能场景矢量图在8月时曾经上榜一次。

可爱、生动的形象和冷静、严谨的冷色调是让这张图片

从众多固有风格的科技主题画面中脱颖而出的重要原因。



NO.2 图片ID:1071512777(点击查看图片)



这张3D霓虹场景利用简单的几何结构搭建亮部背景,

前景空间的留白倒影也为画面增加了立体感和质感。

是一张通用型很强的背景图。



NO.1 图片ID:1092261245(点击查看图片)



经典的红、金配色,剪纸风格设计。

中国传统的窗框轮廓,左右对称的排版。

可见该作者对于传统题材的理解和用心。




一周热销题材TOP5



NO.5 健身(点击查看该题材)



进入秋冬之后,健身题材屡次上榜。

除了有氧运动的内容以外,力量训练内容增加明显。

不论男女对身体线条的追求越来越以欧美为目标。



NO.4 城市(点击查看该题材)



从后台数据来看城市题材摄影画面在上周的热销,

主要是互联网公司的采购为主。

在互联网企业不断发展的过程中,

以城市为核心、为载体的成长方式需要更多的城市影像

来传递各类品牌理念、产品诉求等信息。



NO.3 圣诞(点击查看该题材)



圣诞题材毫无悬念入榜,

小编目测未来几周内圣诞题材会一直榜上有名。

圣诞装饰主题的照片在上周比较抢眼。



NO.2 科技(点击查看该题材)



本次热销的科技题材中,以太空科技画面为主。

太空技术不但是各国国力竞争的重点项目,

也承载了人类不断探索和追求超越的梦想。



NO.1 金融(点击查看该题材)



双十一之后,人们结束了购物狂欢。

把视线集中在了各种销售行为背后的商业逻辑上。

中产阶级也更关心各种商业顶层的内容。

金融题材内容作为严肃话题一直处在讨论热点。




蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

设计图集:创意广告设计

蓝蓝设计的小编

作为一名设计师,脑洞是很重要的,虽有一些不切实际,不过是你对这个世界看到的经过反思之后的一种再加工,每个人不可能闭门造车“生”原创的。你必须经历这个过程。


哎哟,这里发现一个比头脑风暴还靠谱的创意产生方法!

之晨

编者按:一直倍受设计师推崇的头脑风暴,是否真的是生成好创意的神器呢?今天这篇译文,通过多组科学的对比研究,发现了一个比头脑风暴更,能产生更多好创意的方法,绝对是灵感枯竭癌的救星,一起来收!

研究表明头脑风暴生成的好创意比人们自己独立思考还要少。

不过好消息是,有更有效的团队工作方式存在。

如果你是个上班族,恐怕十之八九都曾被上司或同事们拉进头脑风暴会议中。脑暴,追其本意原应是一个产生好主意的杀手锏。而公司普遍热衷于通过这种合作形式淬炼出团队的集体创造力。但殊不知,原来脑暴其实是一个糟透了的技巧 — 实际上,人们在脑暴过程中所产生的好注意比他们独立进行思考的时候还要少。好在还有一个更好的方法可让团队合作更 — 头脑写作(Brainwriting,你可以理解为它是建立在纸笔上,而少了一群人之间瞎扯淡的脑暴)。在一份新的研究报告里,研究院测试了这个方法的各种版本,试图总结到底是什么促使着人们能够产生更好的想法。

uisdc-brain-20161020-2

创意窜天了!有哪些能帮设计师突破固有思维的优秀网站?

之晨

website-break-through-limit-1

编者按:一成不变的布局方式、相同图库的素材、标准化的原型流程…… 如果你已经习惯了这些抑制创造力的行为,不妨看看今天@十萬個為什麽 带来的这篇Smashingmagazine 译文,附上超多创意窜天的优秀案例,来收!

10条没人告诉你的创意秘诀

用心设计

艺术家 Austin Kleon 的著书《像艺术家一样去偷:10条没人告诉过你的创意要诀》篇幅不长,却给初出茅庐的艺术家们(有创意的那类)提供了许多有益的指导。

10条没人告诉你的创意秘诀

译文:移动网站和应用之争——下一个战略转变

之晨


Nielsen认为移动应用的优势在于:
1. 可用性比移动网站要好。
2. 可以针对设备的性能限制和特性做出调整,而移动网站可以做的优化还很有限。
3. 能够提供更优越的商业方案给内容提供者,即通过应用商店获取收益。

而移动网站的优势在于:
1. 未来10年网络访问速度的提升很可能比移动设备性能的提升要大得多。
2. 开发和维护的代价低,移动网站只需要3种设计来涵盖手机、中等尺寸平板设备和大尺寸平板设备,而应用则需要开发多个版本来应对越来越多的平台和子平台。
3. 内容发布者能够避免把收入分成给应用商店并且能够越过应用商店的审查限制。
4. 能够更好地与桌面端网站整合。

【设计经验传承】图标设计

蓝蓝设计的小编

UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位。每位设计师所处的阶段所关注的要点是不一样的,我把图标设计分为2个阶段–初阶与高阶,这样分是为了有步骤性的学习和进阶的加强,当然,能人的话一步到位,对于新人来讲会较难,需要实际工作中辅导与自己经验总结。我不会华丽高大尚的语言,但是我可以分享一些实实在在的基础方法,也是这几年会给带的学生反复必讲的入门辅导,有自己成熟方法表达的设计师可忽略这里,这里先说初阶的设计关键要点。

一.概念类别

日历

链接

个人资料

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

存档