首页

排版不必花里胡哨 | 设计技巧

seo达人


图片

图片图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

图片

有些人可能会说,我要是这么排版,客户肯定不会觉得太简约了、重做,我只能说有这个可能,毕竟每个人的喜好和具体的需求是不一样的,所以,你要用在合适的产品和客户上,不要千篇一律;其次也不能直接照搬日本设计的排版,比如大量的竖排在中文设计里不合适,还是要以横排为主;另外,很多时候客户不是不喜欢简约一点,而是不喜欢你做的简约,如果你把客户的需求都表达出来了,还简约好看,客户没理由不喜欢。 


作者:葱爷

转载请注明:学UI网》排版不必花里胡哨 | 设计技巧

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



案例锦囊|有哪些小交互让你瞬间觉得产品很「智能」?

seo达人


一、猜到了你想要的

案例 1    使用“多多买菜”加购一款蔬菜,平台会自动为你提供更多规格做选择。比如你将 500 克的西红柿加入购物车,平台会告诉你可以买“两盒装“,价格更优惠:

图片

 

案例 2     脉脉上,如果对于自己所在的公司的内容进行评价,系统会直接采用随机命名的方式,给你起一个有趣的新名字,起到了保护你隐私的作用,让你放心大胆地讲实话:

图片 

案例 3     bilibili 上的很多主播会给观众做与内容相关联的进度条,你可以很清楚的看到视频每一段的具体内容和播放进度,跳播更方便:

图片

 

案例 4     用搜狗输入法输入“今天天气”的这几个字时,会自动推荐当天的天气情况。你可以提醒你在乎的人注意天气变化:

图片

 

案例 5     产品也可以阻止你做坏事。Adobe Photoshop 软件中内置了一个钞票防伪系统,用来防止你利用其制图功能非法制作假钞:

图片

 

二、知道你不知道的

案例 1     高德地图会给用户很多条可选路线,对于每条路线都会给出详细建议,比如:拥堵少、红绿灯少,还会给出明显提示:“窄路多,需要小心驾驶” 或者 “路上有一个新增电子眼” —— 它知道很多你不知道或记不住的内容:

图片

 

案例 2    在百度浏览器上查找不同单位之间的换算时,百度会呈现出与你搜索的内容相关的所有单位名称,便于你进一步做查找和换算:

图片

 

案例 3     夸克 App 上搜索热点话题,会出现与事件相关“大事项”,以时间倒序的方式还原事件始末,为群众们吃瓜提供了便利。下图是我在 2021 年 12 月 20 日那天搜索王力宏事件时看到的信息内容:

图片

 

案例 4     在微信中搜索文章时,如果有虚假谣言类的文章,微信不会让文章不可见,而是会郑重其事地做官方辟谣,帮助你矫正观念,粉碎谣言:

图片

 

三、替你做完该做的

案例 1     在新的网络环境中使用苹果设备连接 Wi-Fi,具备同样 Apple ID 的设备可以进行 Wi-Fi 的密码共享,不需要你再重新输入密码:

图片

 

案例 2     钉钉和阿里的出差系统打通,当你提交了出差申请,到了出差的那一天,钉钉上状态会自动切换成 「✈️出差中」,方便其他同事了解你的工作状态:

图片

案例 3     如果你晚上临睡前将苹果手机连上充电器充电,iOS 手机系统的「计划充电」功能会根据你的使用习惯,在电量达到 80% 时就会停止充电。然后在你第二天早上使用前再继续充电直到充满,以此延长电池的使用寿命。这意味着 iOS 系统要准确判断出你每天开始使用手机的时间。你也不用因为担心整夜充电对电池有损害而选择不在晚上充电或是半夜爬起拔掉电源:

图片

 

案例 4     在屏幕很暗的情况下,打开微信或支付宝的支付二维码,屏幕会瞬间亮起,便于商家扫码付款,不需要你手动调亮屏幕,扫码后又会回到之前的屏幕亮度:

图片

 

四、把复杂的事情变简单

案例 1     用飞猪 App 查找酒店时,可以在地图上用手指画圈,不需要输入街道名称就可以满足你自定义范围来找酒店的需求:

图片

 

案例 2     微信的图片搜索的功能,可以通过图片里的文字和内容来检索图片,比如你只需要输入“食物” 二字,就可以看到与食物相关的所有图片。你再也不需要在一堆图片中找到眼花了:

图片

 

案例 3     NN/g 网站移动端的支付流程中,“银行卡可用时间”的输入框使用了特定的格式输入效果,你不需要纠结输入内容的格式问题,可以很轻松地完成填写:

图片

 

案例 4     苹果的 Airdrop 箭头是一种方向性的指示,将你的 iPhone 对准对方的 iPhone,就能很快速地在周边一群设备中找到对方。同时 Airdrop 自己也有记忆,你经常发送的用户和绑有你自己 ID 的设备,都会靠前显示:

图片


作者:元尧

转载请注明:学UI网》案例锦囊|有哪些小交互让你瞬间觉得产品很「智能」?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



超全面的设计底层理论,优秀设计背后离不开这些(下)

seo达人


图片

 

一、奇数原则和三分法构图

奇数法则意思是说,在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称,这可能会显得过于正式和不自然。比如,在一行中排列三个或五个卡片会比2个或4个效果更好,作品会更加让用户感到舒服和自然。

图片

 Iskos Design 就是用的奇数原则做的网页设计

三分法构图(也被称之为黄金网格规则),在画面中以水平和竖直方向分成3×3的网格和4个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上,这样可以很容易的设计出满意的构图。

为什么会这样?因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美,产生了更有吸引力的构图。

图片

 

二、视觉引导线

你希望用户关注哪些地方?高级设计师非常擅长引导用户的视觉焦点,这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感,也能为画面增添视觉冲击力。

达到这种效果通常用特定的形状和线条,或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。

图片

从左到右的不易察觉的曲线将用户的视线引导到页面文字上

 

三、大小和比例

大小(scale)是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次,其中最大的元素首先会吸引用户的注意力,因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的,然后逐级递减。

比例(Proportion)不同于大小,类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小,但它们之间的大小差异,整体来看就是比例。

熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小,或者比例失调时,设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如,标题与子标题和正文相比显得过大。当设计元素失衡时,设计就会“感觉不平衡”。

图片

大小和比例都没做好时(左图),看起来处理的比较细致了,但依然没有做到很好,在大小上正文和标题分不清(右图)。

 

四、强调

强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出,即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母,因为没有强调就没有层级。

与其他一些设计原则一样,“强调”是用来引导人们关注设计,并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在99%的情况下都使用这种原则。

图片

使用这个原则,在购物网站上强调了标语和产品,转化效果非常好

 

五、统一性

统一是指设计元素如何很好地结合在一起,形成“视觉凝聚力”。它指的是设计中的连贯性,让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系,以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理,质量也更高。

运用统一的配色,重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感,也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来,形成一个完美的整体。

图片

一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。

 

六、接近原则

格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远,元素就显得越不相关,它们之间的关系就会减弱。一般来说,人们会认为远离的元素是不相关的。

不应该让用户在设计中分辨哪些元素是相互关联的,正如美国邮政服务的例子所显示的那样,缺乏对邻近性的关注会导致直接的认知紧张,损害用户体验。

图片

接近原则没做好的案例。由于字段标签离它们下面的字段更近,人们可能会搞混

下面是一个邻近性原则做的好的案例,我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。

图片

一个把接近原则用好的网页设计案例

 

七、一致性

一致性原则使数字产品的使用更加可预测,符合用户的期望。设计中的一致性可以培养熟悉度,它可以提高用户体验、可用性和用户使用效率。另一方面,不一致的设计将产生更多的认知负荷/脑力劳动,并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!

做好一致性可以增强“审美凝聚力”。“我们都知道,当我们使用应用时,应用的导航位置如果经常变化,或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色,这是多么令人沮丧。

除了视觉一致性和易用性,品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现,如排版、配色和图案,高质量的品牌体验将无法传递。

在用户体验方面,一致性意味着在设计中使用相似的UI元素来完成相似的任务,即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性,所以一致性对用户体验的可用性有很大的贡献。

图片

一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。

 

八、颜色

颜色在设计中是非常重要,几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳,而一个平庸的配色会降低用户的体验,甚至阻碍他们使用产品的能力。

明亮、丰富的颜色比柔和的颜色更引人注目,因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的,微妙的配色方案,但适当的对比必须要有,特别是文字,必须保证可读性。

颜色甚至可以用于呈现UI中的结构感并指向可用的交互,但为设计制作一个配色方案并不是一项简单的任务。除了品牌化,还必须非常小心地创造颜色的和谐和耐用性,使得它能在各个场景下都能正常使用。

色彩心理学也不容忽视。色彩承载着意义和情感,可以向人的潜意识传递信息。在品牌方面,人们对颜色做了大量的心理学研究,因为在人们与品牌进行任何互动之前,颜色会让他们产生一种本能的反应。例如,蓝色通常被认为是可靠的、安全的和平静的,想想银行;而红色是刺激的,被认为是增加人们的心率,想想饮料包装。

图片

一个极简主义的暗色主题设计传达了一个特定的品牌气质,并使用了少量的颜色。

 

九、排版

排版在设计中扮演着非常重要的角色,它的重要性再怎么强调都不为过。在构图中,字体样式对人们感知设计的影响比任何其他元素都大,可能除了颜色。

因为我们的大脑以闪电般的速度运转,一个字体会对一个设计产生影响,以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样,字体甚至会影响我们的情绪,资深设计师可以通过字体传达情绪和风格。通过选择合适的字体,我们可以传达出稳定、优雅、舒适、可靠、有力等信息。

排版层次结构可以快速建立视觉层次结构,并且通常在其中扮演重要角色。因此,在设计中经常使用不同的字体和字体大小来表示层次结构,例如标题、副标题、正文和引用。

“除了确保文本清晰易读,排版可以帮助你理清信息层次,传达重要内容,并表达你的品牌。” ——苹果的人机界面指南

图片

兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。

 

十、负空间(又名留白)

Claude Debussy 曾说过,“音乐是音符之间的空间“。同样的观点也适用于设计,元素之间的负空间给予设计强调、平衡和统一。

元素周围适当的负空间将焦点集中在元素本身。它强调了内容,并提供了必要的喘息空间,以确保布局不显得杂乱。没有了呼吸空间,人脑就不太可能扫描兴趣点,更容易感到困惑。

图片

苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。

 

最后

人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记,美学的完整性会严重影响用户体验。

基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下,也可能实现可接受的设计。然而,这可能需要大量的尝试和错误才能创造出看起来不错的内容,并创造出最佳的用户体验。

产品的美学质量与它的实用性密不可分,因为我们每天使用的产品影响着我们和我们的幸福。”但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)

当我们不关注由设计原则驱动的设计质量时,我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时,品牌就会受到伤害,产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨, 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”

设计的细节成就了设计本身。—— 查尔斯 伊姆斯(Charles Eames)

 

原文:https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

作者:Miklos Philip

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

图片

转载请注明:学UI网》超全面的设计底层理论,优秀设计背后离不开这些(下)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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




灵魂注入指南-打造富有生命感的产品IP(下)

seo达人


图片

TIPS:

· 全文共计2643字,阅读需5分钟左右

· 文章源自于日常设计工作的沉淀与总结,不排除个人观点的局限性

 

图片

灵魂画手指南-基于人格特质的设计表现

1、人格特征下的设计原则指引

完成人格画像是塑造生命感的第一步,更重要的是如何将这样的人格特质系统性的体现在IP形象中,为此我们有必要将人格中的核心特质转译为设计语言,定义IP在场景、情绪、行为、语言4个方面的设计指引原则。下文我们继续以“犀宝”在工作台的设计应用为例,基于人格特质归纳设计原则。

1.1 “犀宝”的核心人格特质

图片

1.2 场景原则

经过多轮线上线下调研,我们对客服岗位建立了基于职业特征的用户画像:高强度、高疲劳、高负压。面对即时沟通、多会员切换、服务考核等压力,客服往往需要一个高效、专注的工作环境。因此基于人格特质的场景原则首先要保证“不打扰”,除功能性需要,应避免在客服服务过程中过度设计。结合“犀宝”利他主义、强共情等的人格特征,更适合应用在非上班状态的场景中,如:引导教学、页面加载、为空状态、结果反馈等。

图片

1.3 情绪原则

经过对IP形象在工作台中的典型应用案例的编码梳理,我们基于情绪二维模型对“犀宝”的情绪进行了管理统计。情绪象限中所定义的触发条件即为应用原则,高频出现的情绪即为典型情绪。

图片

我们将“犀宝”的典型情绪统计如下:

高兴、冷静、兴奋、放松、慌张、欣喜、疑惑

将“犀宝”的情绪原则进行如下归纳:

① 面对客服或客服的正向行为,建议使用带有正向情感反馈的情绪(如高兴、欣喜、兴奋等);

② 面对客服的负向行为,避免使用带有负向情感反馈的情绪(如紧张、慌张、沮丧、尴尬、疑惑等);

③ 处于工作状态时,建议使用中性的情绪(如冷静、严肃);

④ 面对工作台/系统的状态,不受常态的正负向情绪拘束;

⑤ 任何状态下,避免使用带有攻击性的情绪(如愤怒、厌恶、鄙夷、怨恨等)。

1.4 行为原则

行为原则是在IP人格特质与典型场景的基础上,对IP行为特点的建议与约束。按照以上思路,我们对“犀宝”的行为原则归纳如下:

图片

① 建议使用具有引导/指向性的动作(如举手引导);

② 建议使用具有社交礼仪的动作(如挥手问候/告别、双手呈递);

③ 建议使用呈现工作状态的动作(如佩戴耳机坐在电脑前);

④ 建议使用操作智能设备的动作(如操作虚拟现实工作台、使用可穿戴设备等);

⑤ 建议使用带有正向情感反馈的动作(如拥抱、点赞、鼓掌、加油等);

⑥ 避免使用带有剧烈运动的动作;(如奔跑、跳跃、健身等)

⑦ 避免使用带有情感攻击性的动作(如指责、挥拳等)。

1.5 语言原则

语言原则是在IP人格特质的基础上,对IP声音、话术等特点的建议与约束。按照以上思路,我们对“犀宝”的语言原则归纳如下:

图片

 

2、拟人化的形态设计

在明晰人格特质和设计应用原则后,我们可以进一步思考IP形象在产品中的拟人化表现。在这里,简要的分享一下思路方向。

上文提到,拟人化是把物拟作人,使其具有人的形态、情绪、行为、语言等特征,转译为设计语言即为IP形象的形态结构、面部表情、体态动作、声音文案几个部分。其中IP形象的结构决定了表情和动作的可塑性、丰富性。从上文JOY的形象设计案例中不难看出,人体化结构是IP形象设计的主流手段之一。

对于拟人化的表现个人建议优先从结构人体化着手,结构满足后,具有人格特质的拟人化表现自然水到渠成。在这里,我们可以将结构人体化的方式总结为:

2.1 模仿人类的五官结构

使IP形象具有眉、眼、鼻、嘴、耳的基本结构关系,帮助IP进行生动、丰富的情绪表现。

图片

2.2 模仿人类的形体结构

使IP形象具有头、手(手指)、躯、脚的基本结构关系,帮助IP进行生动、丰富的动作体态表现。

图片

 

3、仿真化的动态设计

在完成人格化、拟人化的设计思考后,相当于为IP绘制了一幅角色设定草图。接下来我们可以结合品牌/产品气质,丰富感官表现,精细化的同时进一步有增强其生命感知。在这里,简要的分享一下思路方向。

上文提到,仿真化是对形象进行物理及生物特点的感官还原,表现在造型、空间、色彩、质感、动态、声音等多方面。然而,不同类型的品牌、产品、应用场景,对仿真化的程度需求有所区别,如:主机/电脑游戏类产品,娱乐属性更强,为了追求沉浸式的感官体验,在各方面的仿真表现都相对较高;品牌/产品宣发场景,展示性更强,仿真表现的权重也相对较高;在APP/网页界面中,更注重功能体验和产研效率,风格以扁平为主,因此对于仿真表现的诉求也相对较低,在这种情况下,对比造型、空间、色彩、质感等元素,IP形象的动态表现最能直观的表现生命感。

那么,如何通过动态表现增强产品IP形象的生命感?

3.1 模仿真实的生物规律

图片

① 呼吸感:

呼吸是生物的生物学功能,有节奏的呼吸起伏是生命体的直观体现;

② 眨眼:

眨眼动作属于生物体基本的生理反射,间隔性的眨眼动作可以增加形象的生命感知;

③ 模仿生物习性:

以“犀宝”为例,犀牛生活在蚊虫多发的非洲,灵活直立的大耳朵不仅可以洞察环境,还可以帮助他们躯干蚊虫,抖动耳朵是一个非常具有生物习性的行为反射。在呼吸、眨眼的基础动态上增加间隔性的抖耳,可以让整体形象更加真实生动。

3.2 模仿真实的动态规律

现实世界中存在着许多物理运动规律,如运动惯性、速度曲线、落地缓冲等等,想要表现出IP形象真实生动的动态特征,需要了解并掌握其中的动态规律。从动画的视角来看,迪士尼黄金12定律具有很好的专业参考性,相对全面的总结了20世纪30年代以来迪士尼动画的制作方式,是动画专业必修的知识点。

图片

小结:如何基于IP人格特质进行设计应用?我们的方式是结合产品特点、IP人格特质拟定设计原则;通过拟人化的结构增强IP形象在动作表情方面的可塑性;最后通过合理的仿真化手段完成设计应用。以下是“犀宝”在产品应用中的部分设计案例。

案例一:培训机器人对客服模拟练习的状态反馈

图片

案例二:客服工作台启动页加载插图

图片

案例三:客服应用页面加载插图

图片

案例四:浏览器升级提示

图片

案例五:静态插图合集

结合设计和心理学理念来看,具有生命感的IP形象能够带来更有力的功能及情感价值。通过对IP生命感的分析,我们认为IP形象的生命感由表及里表现出“仿真化、拟人化、人格化”三个层次。其中人格是决定IP形象如何表现的核心,因此对于形象的设定逻辑建议由里至表的进行思考统筹。从设计力度上看,对于各层次的程度把控与配合,建议根据产品属性、传播媒介、表现形式、技术条件、预期效果、预算成本等具体情况进行评估。

 

引用及参考文献:

[1] 鲁道夫.阿恩海姆. 视觉思维. 四川人民出版社. 2001(3)

[2] 姚浩然.人格化加剧形态设计研究[D].南京:南京林业大学木材科学与技术,2012:12.

[3] 吴龙华.个性心理结构问题的研究[J].人力资源管理,2012(12)


作者:AlibabaDesign

转载请注明:学UI网》灵魂注入指南-打造富有生命感的产品IP(下)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



盛夏的元宇宙之旅-玩转电子沙盘

seo达人


图片

经过前期的调研和分析,以及结合相关的业务诉求,确定了我们的项目目标,那就是要做出一款为新房营销赋能的设计工具,同时也总结出好的电子沙盘要同时具有这四个方面的特性:

图片

图片

 

1、效果真实自然

电子沙盘要传达的是真实的地形地貌等信息,使用户在观看时要有身临其境之感,因此在最终效果上要力求最真实自然的视觉体验,为用户呈现最好的效果。

图片

图片

 

2、覆盖类型广泛

在模型的品类方面力求多样化,这样整个场景才会更接近真实的效果,在项目中我们使用模块化的方式,创建了项目资源库,达到了建筑、植被、健身器材、公共设施等全品类覆盖、共产出植物模型17种,建筑模型36种,器材设施类模型22种、UE4引擎材质260多种,为最终效果的实现起到了决定性的作用。

图片

图片

 

3、模型细节精细

除了周边环境要真实自然,小区内每栋楼的建筑细节也非常的丰富,以真实的建筑结构信息来进行模型制作,用户在使用时能够查看到楼盘内每一栋建筑的外观和结构细节。

图片

图片

 

4、生成策略丰富

区别于传统的手动建模方式,我们在实施阶段采用了模块化资源+智能化生成的方式,首先在数据层级对整个项目区域根据功能进行划分,针对每一类区块都进行了相应的生成策略的设计。共产出摆放规则36种,精细到每一处细节都有相应的生成规则。

接下来的部分我们就选取几种比较典型的区域摆放规则看一下。

图片

图片

 

图片

根据当前项目特点,在具体实施阶段我们采用了数据输入和智能化生成的整体策略。

 

1、本案小区楼栋:

楼栋的建模使用了模块化的方式,使用预制的窗户,外墙等模型部件按照规则将不同的组合部件结合在一起生成整体的楼栋。

图片

2、小区入口:

入口处大门的生成,首先需要在初始数据中输入入口的信息,然后根据设计规则使用模型库中预制的模块生成入口大门。

图片

 

3、道路生成:

根据道路结构进行数据的分层拆分,然后再将各部分模型组合起来形成道路,这样就方便了后期添加沿路的树木,以及根据车道信息添加车辆等等。

图片

 

4、配电房,设备用房:

小区内的配电房,设备房等首先划定区域数据,然后选择合适尺寸的模型进行摆放,最后做顶点拉伸处理。

图片

 

5、底商商铺:

底商的生成与设备房等类似,但是也有一些区别,由于每个楼盘的底商区域尺度不同,所以要对模型进行相应的拉伸去适应相应的区域大小,底商部分我们采用了整体拉伸的方式,这样不会破坏模型上的一些结构细节。

图片

 

6、小区广场:

小区广场的效果相对来说比较丰富,模型种类比较多,不适合使用拉伸的方式去生成,这部分采用了对不同功能的设备进行分块的方式,比如儿童游乐设施,成人健身器材等,通过不同的组合可以生成多种方案。

图片

 

7、地形生成:

地形的创建要依据真实的地理信息数据来制作,以保证电子沙盘真实的参考性,这部分我们使用了当下比较先进的智能化解决方案,根据数据将地面,道路,水系,植被,建筑等分层创建,最终在虚幻引擎中进行整合渲染。

 

图片

这部分看下电子沙盘现阶段的最终效果:(点击图片前往原文观看视频)

 

图片

经过大家的努力,最终我们的电子沙盘获得了各方的认可,在制作过程中也收获了不少宝贵的经验,总结如下:

重视排期和做好阶段性任务的拆分:由于项目周期比较长,所以整个项目必须有统一的阶段性规划和排期,按照统筹好的计划来一步一步实现目标。

项目参与人员之间的沟通很重要:每个成员之间对于进度和过程中遇到的问题必须及时同步和提出,尤其对于跨部门合作的项目来说,这一点尤为重要。

项目的完成离不开大家的共同努力,在此对所有人表示感谢。


作者:环铁艺术家

转载请注明:学U网》盛夏的元宇宙之旅-玩转电子沙盘

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



Apple music用户体验分析,原来苹果也没有把这些做好

seo达人


图片

Illustration by Jan Marin

 

Apple Music诞生的原因?

我是果粉,在过去的10年里一直在用苹果产品,很欣赏乔布斯早在那时就倡导的优秀设计理念。在那些年里,我迷上了苹果的生态系统,因为对我来说,“它太好用了”。

其中一个便是iTunes。我会花大量的时间仔细整理我的音乐库,并将它同步到我的iPod上。

在中间,我发现了Spotify,几年后,我曾经喜欢的iTunes乐库已经积灰了。

在大量的猜测和谣言之后,苹果最终加入了流媒体竞争——完全放弃iTunes,并推出他们的新音乐产品,带有付费订阅流媒体服务的可选功能,名为“Apple Music”。

图片

Source: Apple

 

在用了Spotify多年后,我决定给苹果一个机会,重新尝试用苹果的音乐产品,到现在用了苹果音乐大概一年。

不多废话了,以下是我作为一个产品设计师和一个想听音乐的普通用户整理的一些想法,分析下Apple music存在哪些体验问题。

 

一、搜索

音乐APP的一个关键功能就是搜索,在APP中它的使用频率很容易排到前三。那么,Apple music的搜索功能我觉得做的还不够好。

假设我们想要搜索一个知名的摇滚乐队Weezer,他们是一个很酷的乐队。

图片

我们正确输入了Weezer,自动提示似乎已经出现了。但是等等——这是自动提示吗?

让我们试着输入“Wezer”,假装我们拼错了乐队的名字,以再次确认这确实是一个自动提示,帮助我们确认它与苹果库中的Weezer匹配。

图片

看到这个结果,我猜这应该不是一个很好的自动提示。为了确定是否真的做了自动提示功能,我们换一个关键词,这次选另一个非常受欢迎的摇滚乐队-Queen。

图片

这次好像终于是有自动提示了,但为什么Queen能快速出关联结果而Weezer没有?

图片

好吧,让我们继续寻找线索。点击那个下拉列表,看看它将带我们去哪里。

图片

结果出现了一个全新的“结果页面”。如果能够完全跳过这一页就好了(就像我们搜索Queen的时候),因为我真正想做的是直接进入Weezer的音乐。

此时想想我们下一步要做什么。我不记得我最后去了哪里,但我知道我想回到最初的位置。我们该怎么做呢?可能像我们在浏览器一样有一个后退按钮,对吧?但没有找到。

事实证明,没有后退按钮。至少,它没有通用的后退按钮来撤消你所做的任何导航操作。你能猜到为什么吗?

 

二、导航

我不知道你怎么想,但我发现Apple Music的导航是它最令人困惑的方面之一。优秀应用不会让你思考你在哪里,每一个页面都会是清晰的且可以很容易撤消和回到你之前的地方。

苹果iOS的人机界面指南为应用提供了三种类型的导航,苹果似乎也在macOS中使用了这些概念,苹果音乐就使用了平行导航。

(彩云注:这里我跟大家解释下iOS的三种类型导航模式

层级导航(Hierarchical navigation)。这个导航模式只能在每个屏幕做一个选择到达一个目的地。为了到达另外的目的地,你必须重新开始你的步骤或者从起点重新开始,做出不同的选择。设置和邮箱就使用这种导航样式。

平行导航(Flat navigation)。这个导航模式允许在多个内容目录之间转换。Music和AppStore使用这种导航样式。

内容驱动或者体验驱动导航(Content-driven or experience-driven navigation)。这个导航模式在内容间自由移动,或者依据内容本身定义导航。游戏,图书和其他沉浸式app基本使用这种导航方式。)

图片

Apple music有一个侧边栏,但我觉得这样意义不大。平行导航在移动端体验中非常好用,因为屏幕面积很小。如果你经常使用导航栏,你可以知道你在哪个标签页上,还可以独立于其他选项卡更深入地探索一个选项卡。

图片

这是一个自iPhone发布以来一直保持的惯例,人们不会轻易混淆自己在哪里。那么这在桌面上是如何工作的呢?

图片

简而言之,这也意味着侧边栏中的每一项都有自己独立的导航。现在让我们看看Spotify是如何处理桌面导航的。

图片

注意到了吗?Spotify似乎结合了侧边栏的优点,无论你点击应用的哪个位置,它都允许你轻松地回溯你的步骤。

为什么在我看来这比苹果的设计更好?

它可以减少认知负荷。人们没有时间去记住他们上次在应用中的位置。人们习惯于使用他们的浏览器的后退键。Spotify利用了这一点,使新用户的行为符合心理预期。

它还降低了用户焦虑感,允许用户自由探索,而不用担心搞砸或无法解决问题。

 

三、.系统反馈与探索

点击是任何应用的一个重要部分,因为你需要点击来操作。但Apple music的点击体验有点糟糕。

就拿这个正在播放的状态来说吧。

图片

自从iTunes诞生以来,这在很大程度上保持着相同的功能一致性,一种查看当前正在播放的歌曲的方式。

当你听着Weezer的一首新歌,然后想,“嗯,这支乐队太棒了,让我看看他们其他的目录!”让我们从这里点击Weezer !

图片

当我们点击了标题和专辑,但毫无效果。你能猜到这里具体要怎么操作才能达到我们想要的效果吗?

图片

你猜不到的是居然要点击“更多”菜单,浏览列表,然后在列表底部看到“在Apple music中显示”。

但在应用的其他地方呢?你可以点击歌曲、专辑或艺术家吗?好像也不行。

图片

在这一点上,你可能会想,我为什么要在这个问题上做文章?因为我认为音乐应用的全部意义,尤其是在一个巨大的流媒体库中寻找新音乐的意义:是点击、探索,并轻松地找到歌曲、专辑和艺术家。

我认为用户不应该因为不遵守应用希望使用它的方式而受到阻碍。

(彩云注:这里作者想要表达的问题是交互上不应该让用户去遵循产品的规则,而应该尽可能的满足用户的心智模型,用户在这里的需求很清晰,打通这里的流程问题很重要)。

 

四、响应时间

一款好的应用不会让你等待。我们知道加载时间会极大地影响网页的跳出率,我不认为我们必须区别对待本地应用。

这让我想到了使用Apple Music时最大的痛苦之一:

图片

在页面之间等待,等待。想知道下一个糟糕的行为会是什么?失去当前的状态提示。因为延迟,无响应的问题,不知道当我点击“播放”时,我的歌曲是否会真正播放。

 

总结

我相信好的设计应该是令人向往的。我想喜欢Apple music,更重要的是,我相信苹果仍然有很强的设计原则。但我这次在apple music中没有让我享受到该有的好体验。这是一个遗憾,因为作为一项服务,Apple music还是有很多优点。

图片

  • 从策划的角度来看,我发现苹果选择的曲目质量很高。从人工挑选的歌曲(比如上面显示的播放列表)到算法根据我的听歌习惯为我提供优秀的音乐。这感觉非常像苹果,我一直惊讶于它的选择是多么的好。
  • 从音频的角度来看,我实际上更喜欢音乐的质量,这一点要Spotify要好。

这些优点反而让我更加失望,因为这个产品本身不容易使用。

说到底,真正的问题在于苹果没有明确定义他们的产品是什么。如果说音乐应用是iTunes的继承者,那么不幸的是,它没有达到目标,因为他们试图将流媒体服务(Apple music)嵌入到传统模式中。如果Apple Music是他们的重点,他们并没有让它作为一个独立的服务脱颖而出。

有一件事是肯定的,桌面版的Apple Music如果要达到一个像样的可用性水平,还有很多工作要做。

 

你觉得呢? 你在体验苹果产品时,还遇到哪些痛点?期待你在留言区探讨~

 

原文:https://uxdesign.cc/apple-musics-ux-problem-e8f5fac756de

作者:Jake Dragash

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

作者:彩云Sky

转载请注明:学UI网》Apple music用户体验分析,原来苹果也没有把这些做好

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



如何分析竞品设计语言?

seo达人

图片

做设计语言分析最重要的就是选对分析对象,不管是哪个行业,选对了方向基本上不会出什么大问题。

比如,要做一个音乐产品设计改版,想看看一些品牌基因塑造比较好的APP是怎么做的,这时候可以选择国内外排名靠前一些音乐去研究分析。

如何选择正确的分析对象,一般情况下选择直接和间接竞品,如果你不知道有哪些优秀的产品,可以在这个网站看看。

图片

七麦数据

比如,搜索一个音乐后,就可以看到音乐在国内的排名,当然还可以切换国家,看看其他国家的APP排名。

竞品的对象一般选择3~5个靠前就差不多了,因为选择越多,后期分析起来越麻烦。

 

图片

前面我们已经确定了几个分析对象,那么到这里我们就开始分析所选产品的设计语言。

一般情况下,设计语言的分析维度有色彩、图形、布局、字阶、卡片,当然你还可以增加阴影、圆角、动效等细节。

图片

 

1、色彩分析

色彩分析我们一般看品牌主色调、辅助色、拓展色、安全色、以及文字颜色,目的是了解他们的色彩运用规则和制定策略。

比如常规色、按压色、不可点击色彩是如何塑造的。

图片

看个列子,比如白色和灰色的应用场景。

图片

 

2、图形分析

图形一般品牌图形的应用,看看这些产品如何打造品牌DNA,如何强化用户印象,图形的维度一般在图标上体现居多。

图片

比如再来看看Line的

图片

 

3、布局

布局一般我们看产品内容间距,内容网格是如何打造的,间距节奏如何定义。目前主流的网格定义大部分基于2/4/8三个原子数值来定义。

图片

图片

内容间距网格

图片

页面布局网格

 

4、字阶

字体节奏这个比较简单,一般就是看看他们一级标题、二级标题、三级文本、辅助文字等等的字体大小如何定义,找到一个基本的参考方向。

比如像LINE设计语言,他们标题提供了4种尺寸大小,正文也是提供了4种。

图片

标题提供4种尺寸大小,应用在不同场景

图片

正文提供4种尺寸大小,应用在不同场景

 

5、卡片

卡片一般情况下我们要分析圆角节奏,卡片的比例应用情况。

图片

一般情况下黄金比例,特殊场景除外,比如Banner。

图片

需要了解卡片的圆角节奏是如何定义的。

 

图片

当前面我们分析完所有内容后,并了解这些产品设计语言的应用情况以及制定策略,在最后这一步我们就需要将这些分析内容进行梳理成可参考的文档,向团队成员分享你发现的一些核心策略和竞品视觉语言做得比较好的地方,提供给团队参考。

这些分析只是参考,站在巨人肩膀学习,这样也是避免在成长过程中走错方向。最重要还需要接下来的执行,根据分析结论重新塑造自家产品的设计语言。

 

写在最后,

由于篇幅有限,没有将所有案例全部展开,但给大家提供了一个清晰的流程和思路,可以下去尝试使用这种方法做一次分析,就掌握了,有什么不清楚的地方,欢迎留言和我讨论。


作者:刘涛导师

转载请注明:学UI网》如何分析竞品设计语言?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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




间距篇 | 设计师必看的保姆级间距控制规范!

seo达人


优秀的界面设计应该体现在每个维度,间距在设计中也是不可缺少的部分,尤其是界面元素较为密集时,需要对间距的使用掌握得当,合理的利用间距留白,能将信息更高效的传达给用户。

文字、图形、色彩是UI设计的三大组成元素,间距即是这几种元素结合的媒介,如何通过间距给用户带来更舒适的视觉体验是设计过程中极其重要的一环,那么你所理解的间距到底是什么、有什么作用、如何合理有效的使用?笔者进行了整理总结,通过本篇文章揭晓。

 

一、间距在UI中的重要性

1、什么是间距?

间距指的是界面各元素彼此相隔的距离,可以是文字自身的行距、与图片、与组件、与模块的间距,或是界面两侧的安全距离(如网页的宽度为1920px,内容区为1400px,那么安全距离为两侧各260px)等。

作为UI设计师,在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距,利用各间距之间的规律来组织界面内容,确保信息的节奏性,给用户轻松、预约的浏览体验。

图片

 

2、间距的实际作用

间距可以让界面信息更有节奏,提升内容的可读性,还能通过不同的疏密程度来阐述各元素之间的关系,以吸引用户的注意力,所以在控制界面间距时,一定要有“较真”的心态,任何一次的改动与调整都要先考虑清楚为什么,能给产品和用户带来什么。要做好间距,不能仅停留在视觉层面,需要进行多方面思考。

设计师层面:规范的定义间距,不必每个元素都去考虑间距的大小,有效减少决策和思考时间,提升效率。

开发层面:开发可以按照基础间距去定义变量,长期如此,虽然不能炼成像素眼,但仅凭视觉也能看出间距的倍数。例如基础间距以8px增量,在使用8px、16px、24px、32px、48px…等,开发直接使用基础间距x1、x2、x3…,以此类推,在开发眼中,肉眼定然看不出1px的差别,但却能区分出8px的差距,不必每次都去测量,还能减少误差,高度还原设计效果。

用户层面:有节奏且具备一致性美感的界面效果,信息的有效传递变的轻松,用户体验能得到很大程度的提升。

图片

3.间距的统一性

设计规范的目的是提升设计师的工作效率、团队之间的高效沟通、让设计风格始终保持高度统一。同理,间距也是设计规范中非常重要的一环,它作为规范中的最小单元,如果没有遵循统一,将会直接影响界面整体的版式和布局,信息的疏密程度严重影响用户的浏览。不仅是设计师,开发每次面对同样的模块都需要定义不同的间距也是崩溃的,毫无规律可循。

统一的间距能让界面的视觉效果更有节奏,设计师在设计某些相似的模块时可直接复用组件,即便是多人共同完成同个项目或更换成员,也不会因间距不统一的问题造成整个APP的风格混乱。

对开发来说,如果清楚间距的使用规律,即便有小的误差,也能自行更正,例如使用8px增量,8、16、24…按倍数规律以此类推,若出现9的间距,开发会更正为8、15则会更正为16,自行多退少补,虽然设计师需要细心、尽量不出现这种小的出入,但任何事情都没法做到绝对,统一的间距能让减少设计的出入以及与设计师之间的频繁沟通,能进一步提高开发效率。

图片

▲ 从上图可以看出,间距不规范、信息就像一锅粥,而规范的使用间距就能将信息自动分组。

 

二、定义文字间距

文字是UI设计中非常重要的信息元素,虽然大多数设计师对文字的属性比较了解,但在真实设计中总会因其他信息的干扰不能合理运用,与上线后的视觉效果预期相差甚大。文字的各种间距处理看似简单,但实际上有很多因素要考虑,例如字间距、行高、段落等,下面带大家一起了解。

 

1、字符间距

字符间距一般都是设计工具的默认数值,无需调整。当碰到多行文字需要避开头尾的标点符号时,使用工具中的避头尾功能即可自动调整字间距,如无此功能,则需手动调整,这里并没有所谓的技巧与方法,头尾避开标点符号即可。

另外,在设计卡片、瓷片区的标题时,有时需要通过调整字符间距来提升界面的舒适度,间距数值自行定义,但相同层级的内容标题字间距一定要保持一致。

图片

 

2、文字行高

行高是指上边框+下边框+字号的高度之和,这里主要针对多行文本。在平面设计中,行高没有一定的标准,如无特别需要,使用系统默认的行高即可。

UI设计中,文字会有5~6个不同的等级,为便于用户阅读,一般会设定行高标准,尤其是新闻资讯类型的应用本身就以文字内容为主,不同的行高对文字的易读性会产生较大的影响。

文字行高一般会设定为字号的1.2~1.5倍,具体值跟字号有很大关系,文字越小,行高就越大。例如,我们可以设定字号32px为中间值(非绝对),小于或等于32的字体、行高为字号的1.5倍,大于32的为1.2倍。另外,也可以直接将所有行高固定在字号的1.5倍,不难发现,字体越大其折行的概率就越低,试想一下,如果将48px的文字折成几行,界面还能剩下多少空间?

图片

 

3、文字段落

文本段落间距的重要性在移动UI界面中并不明显,更多体现在网页设计中。需要着重纠正一点的是,部分设计师在设置段间距时习惯性的多敲一次回车键,这种方式并不可取,会造成间距过大、内容脱节。

如有需要,一定要手动设置段间距,这里没有固定的数值和规律,视觉舒适即可。笔者习惯将段间距设定为字号的0.5倍,例如字号为30、段间距为15,字号为40、段间距为20,仅供参考。

图片

 

三、定义元素/组件间距

定义间距其实并没有一个绝对的标准,主要取决于最小单位,例如4px、5px、6px、8px都是可以的,到底使用哪个数值还得根据产品自身定位及内容组织形式,前提是所有间距都要遵循最小单位并基于倍数形成规律。

在设计界面时,需要利用间距来建立信息层级、提升浏览体验以及表达各元素之间的关系,这就是为什么当我们打开新闻资讯、电商类应用会发现信息非常紧凑,而打开工具、社交类应用时感觉信息比较宽松。间距的基数越小、页面就越细碎;基数越大、页面的留白就越多,使用不同的基数,呈现出来的视觉效果也形态各异。

笔者在工作中通常以8px作为基数,以此衍生出8、16、24、32、48、64这6个间距数值,完全能够满足绝大多数的使用场景。当然,针对信息较少的页面也会使用到120、160、200…其他间距数值,例如缺省页、登录页面等。不难看出,上述以8px为基数定义间距数值时,没有40、56这两个数值,难道他们不是8的倍数吗?我们以8和16做对比,后者是前者的2倍,其间距的变化尤为明显;但如果用56和64做对比,后者是前者的1.14倍,其间距的差别微乎其微。敲重点,设计师在定义间距时,需要遵循倍数规则,但同时也要为考虑界面美观及用户的浏览体验而跳出呆板的规则,当间距数值越大时,根据基数所跳跃的倍数就越大,其实设定字号也是相同的逻辑(后期详解)。

图片

 

四、定义模块间距

从信息层级角度来看,等级权重越高、间距就越大,在现实世界中也是如此,一个物体周围的空间越大,就越容易吸引人们的注意力。

模块间距分为块内间距(同一模块中不同元素或信息组之间的距离)和块外间距(同一个页面中不同模块的之间的距离),为了更好的区分信息层级,块外间距一定会大于块内间距,也能保持块内信息的亲密性。

如下图所示,将装修序列步骤、官方攻略、常用服务等看作不同的信息模块,每个模块内元素的间距都会比各模块之间的间距小很多。

图片

 

五、间距的使用技巧及原则

1、接近性原则

需要通过各元素的间距来体现出信息的关联性,格式塔原理中的“接近性”原则告诉我们,相互靠近的物体被认为比相互距离较远的物体更有关联性,因此,相关联的元素之间靠的越近,用户越能感知到信息的关联,同时更能了解整个界面中各模块信息的逻辑关系。

图片

 

2、利用留白强调

很多时候,想让一个元素变的突出,可以用加大字号、修改色值或后加粗等方式进行强调,但这并不是突出信息的唯一方式,当所有元素都变的突出,那就等于什么都不突出了。如果想让界面中的元素不同程度的突出,留白也是一种强调信息的方式,它能引导用户将注意力集中在特定的内容上。

 

3、使用栅格系统

善用栅格系统(上述有详细说明),通过最小间距值进行递增,让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策,后续不管是迭代还是更换设计成员,都能保持统计的间距规范。

图片

 

4、文字行高规则

这个问题在很多团队中都是硬伤,甚至在设计验收时还被直接忽略。在主流UI设计工具中,添加文本元素时,都会有默认行高,在前面的内容中有讲过多行文本的行高为字号的1.2~1.5倍,那么单行文字的行高到底是需要手动设置还是遵循默认,笔者认为都是可以的,但一定要与开发保持一致。

行高决定着文字边缘与定界框的间距,而开发只能看到定界框与其他元素的间距。

图片

1)默认行高

默认行高值会随着字号的变化基于一定的倍数自动增减,需要将此规律或倍数告知开发,开发将此规则植入代码方能最大化还原设计效果。另外在设计界面时,尤其是多组文字元素的上下间距,需要通过计算(文字边缘到定界框的间距+文字元素间距=实际间距)或手动测量才能达到精准状态,下图为例:

图片

2)手动设置行高

手动设置即字号是多少、就将行高设置为多少,确保文字边缘紧贴定界框,在设计过程中调整间距时,无需计算,根据设计工具的智能提示调整即可。

图片

 

5、间距值数量设定

在同一APP应用中,根据最小基数定义的间隔值数量不易过多,一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等,以5px的基数为5、10、15、25、40、60等。数量过多会导致界面不同元素、模块的间距差异化不够明显,数量太少无法满足多元素、模块使用场景,也会导致间距跨度较大。

图片

 

6、明显相邻间距值

设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时,用户很难感知到界面中信息之间的逻辑关系,我们需要根据栅格系统中间距值的增大、设置更大的区间值,让相邻间距值之间的视觉差异更加明显。

图片

 

7、跳出间距的束缚

当界面中的信息较为密集、间距不足以满足信息的突出程度时,需跳出纯粹的间距规范束缚,换种方式或许更好。例如:给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等,需知「此消彼长」的道理。

图片

 

六、结语

如果在处理界面信息层级时,改来改去还是觉得很乱,不防从间距角度出发,或许会有不一样的收获。虽然在刚开始的时候,规范间距带来的效果甚微,但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现,所有内容统一间距规范,不管是构建一致性界面视觉效果、还是对开发和设计师来说,既能提升用户体验、还能提高团队的工作效率。

间距是否规范使用,决定着界面是否规整、信息传达是否清晰,即便如此,间距也只是解决信息层级方式的其中之一,切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转,间距也好、色彩也罢,设计师依然需要从实际用户场景出发,通过不断的思考和经验总结,打磨出更合理、更符合项目需求的设计规范。

作者:大漠飞鹰CYSJ

转载请注明:学UI网》间距篇 | 设计师必看的保姆级间距控制规范!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



如何画好一组线性图标

seo达人


一、图标在UI中的应用

在本文中所说的图标,是指界面中的icon。icon增加了界面的趣味性,也提高了识别性,现在是界面中不可或缺的部分。

 

1、icon在界面中的分类:

icon在功能上来说,分为不可点击的展示图标和可点击的按钮图标。不可点击的展示图标,是为了辅助后面的文字内容,侧重点在于文字,通常尺寸为24×24、28×28、32×32,在小尺寸内为了便于辨认图像,也不要在界面中太抢眼,建议可以使用简单的线性或者面性图标;可点击的按钮图标,常用于导航栏、操作栏、标签栏,通常尺寸为44×44、48×48、56×56、64×64,这类图标可以结合产品调性进行富有趣味性的设计。详见图1.1.1以及1.1.2中红框部分(该示例为好享瘦app中的界面)。

2、icon的尺寸:

icon的尺寸一般选择4的倍数,这样有利于在成倍缩放的时候,不会造成半像素的情况。例如48×48的icon,缩小2倍的时候是24×24;而34×34的icon,缩小2倍的时候是17×17。在图标中应尽量避免出现单数。

 

3、icon的风格:

时下流行的图标可以归纳为:线性图标、面性图标、线面结合图标。至于mbe风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等,都是基于以上三种来进行风格设计。图1.3.1为在dribbble上看到一些比较好看的icon设计,作者ID均备注在右下角,在此仅供参考。除了在dribbble、站酷、花瓣、优设、iconfont等找好看的图标以外,还可以参考市面上主流的那些app中的图标。

二、如何画图标

 

1、画图标的软件:

常用的画图标软件有三个:AI、PS、sketch。

AI的好处是矢量,网格比较规范,容易处理图标的线面转换,其中直角一键转圆角功能非常好用,缺点就是调色非常非常的难用,操作不便,只能处理普通色块,复杂的色彩会耗费很多时间。

PS的好处是调色功能强大,形状剪切中规中矩,缺点是做线性图标的时候需要用布尔运算,描边功能操作起来没有AI方便。

Sketch的好处是矢量,调色十分智能,并且现在做界面多数用sketch,应用起来十分便捷,缺点是它的造型没有AI和PS严谨,一些转角的位置不够流畅,小图的时候不易察觉,放大后就能看到不流畅的线条。

我通常是三者结合来画图标:首先用AI构造基本的形状。如果是要发作品做展示,就拉到ps里面进行调色和展示;如果是放在界面中使用,就拉到sketch调色使用。

 

2、参数设置与参考线的绘制:

在这里演示的是用AI画图标的方法。参数设置方面:首先在首选项-参考线和网格,网格线间隔10px,次分隔线10,勾选显示像素网格;然后在画布框内点击鼠标右键,显示网格;最后在视图中打开“对齐网格”“对齐像素”“对齐点”。图2.2.1为参数设置步骤。

参数设置完毕后,新建画布,我一般新建800×600(dribbble的展示尺寸),图标应小而精致,不宜建过大的画布。参考线是为了规范图标而存在,一般有两种参考线画法(复杂规范与简单规范),它们原理都是一样的,习惯哪种就用哪种。不要纠结参考线的大小应该是多少,根据你图标使用的位置来确定图标大小(也就是参考线的范围),有的朋友知道了46px的参考线怎么画之后,又纠结88px应该怎么画,其实就是一样的原理。你可以根据自己的感觉来微调,稍微大点小点无所谓,重要的是不要出现单数的像素大小就可以。在此以44px大小的图标为例子。

 

a、复杂规范:

画一个44×44的正方形,颜色调为灰色,描边选择0.25pt(在此补充一个知识点,72ppi下的1pt是等于1px的,具体请自行百度),然后然后画一个42×42的正方形居于其中。这个42×42的界线为安全界线,图标不要画超过这个界线,避免在给开发切图的时候贴边切,导致图标出现不自然的边界。图2.2.2详细展示画参考线的步骤。

那么,以上的参考线应该怎么使用?我们画图标的时候,物体会有长有扁,有圆有方,在统一体量感的时候,就需要用到里面的一些参考线。但是记住,参考线是死的,人眼是活的,画完以后,要靠感觉微调,直至视觉上体量感达到一致。请看下图2.2.3分析(图标是iconfont比赛里第二名的商务计划书图标,我临摹了一遍,在此用以示范,原作者是:回忆的沙漏2003)。

b、简单规范:

用复杂规范的参考线画到熟练的时候,就可以用比较简单的参考线去限制图标范围,因为你已经十分熟悉体量感的控制了。简单的画法是只需要画三个正方形,同样线性选择颜色是灰色,描边选择0.25pt。这里有个小口诀:长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。下图2.2.4详细展示画简单参考线的方法。

3、弄懂参考线的画法后,如何在AI建立参考线来复用?

在画布中用描边0.25pt来画好参考线,然后选中参考线,右键-建立参考线。详细请看图2.3.1。

4、各种形状的图标如何在参考线中统一:

前面说到,参考线是为了限定图标的大小,从而达到整体的美观与规范。在画了很多图标之后,我总结出两个小诀窍:a、当你总结出你要画的物体形状时,只要不影响辨识度,可以适当改变一下形状,把高的或者扁的物品,画成比较饱满的样子(图2.4.1的铅笔为例);b、当物体形状不适合画得饱满时,可以尽量上下或者左右撑满,然后旋转45度,以增加画面的饱满感(图2.4.2的刀为例)。

5、绘制过程中要注意的点(敲黑板,此处必须注意):

a、画图标的时候要对齐网格,改变图标大小的时候,注意是不是两边同时缩放,有没有造成半像素,有的话就手动拖动图标对齐网格。

b、可以使用内描边来进行线性图标的绘制,这样更容易对齐网格,但是内描边只要使用钢笔加点来断点的话,就会自动变成居中描边。那么使用内描边的时候怎么进行断点?可以把描边进行对象-扩展,转为形状,然后用布尔运算来剪切。由于太麻烦,我一般使用居中描边(不推荐居中描边是因为在手机界面中的线性图标一般是3像素,居中描边怕出现半像素,影响清晰度),但经过检验,只要注意把线拖动对齐网格,不会影响清晰度。(补充一个知识点:手机界面中的图标,线性一般是用3像素,因为2像素太细,4像素又显得太笨重;当2倍图的时候用3像素,3倍图的时候就会变成4.5像素,所以3倍图的时候要手动把4.5调成4或者5像素。)

 

6、什么是图标的统一性和差异性:

a、在这里的统一性不是指所有的图标里面都要用一模一样的元素,而是图标的线粗细、断点的距离、元素的大小、切割的距离、同样的色调、风格的一致。当所有的图标都用一样的元素在里面时,会造成辨认困难。下图2.6.1,一眼看过去,一模一样的笑脸降低了识别率。

b、差异性是指在统一的风格下,通过造型能力,进行图标的区别,增加辨识度。

三、线性图标画完后如何创造风格(举2个例子):

 

1、多彩底色线性图标风格:

2、同色调线面结合风格:

图标的造型塑造都是一样的原理,关键是风格的形成,需要不断的尝试。前期可以在dribbble、站酷、花瓣、各位大神的作品展示平台多看看,学习一些优秀的图标造型塑造方法、风格、配色,通过大量练习和尝试,慢慢就可以找到属于自己的那套画法。

 

四、图标的导出及展示:

上面说过,我在AI中造型完毕,会拉到sketch或者PS里面修饰。

  • 1、导到sketch里面的方法(即导svg方法):把单独的图标扩展,然后编组,每个图标是独立的一个编组,拉到“资源导出”那里,选择导出svg格式,直接就可以拖到sketch里面用。
  • 2、导到PS里面的方法:选择单独图标,复制粘贴到PS里面,再进行美化。
  • 3、我常用的图标展示方式之一,请看下图~

 

五、创建属于你的个人图标库:

阿里的图库iconfont是国内非常强大的图标库,不仅图标风格众多,还有代码可以调用,十分方便。个人还可以上传图标库到里面给别人使用,并且现在sketch、axure里面都有iconfont的插件,可以随时调用~

iconfront的网址是:https://www.iconfont.cn

图标库:https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.9&manage_type=myicons&icontype=collections&keyword=

 

六、总结(打鸡血)

只有少数人是天才,大多数情况下我们都要通过大量的练习,才能促成质变。一开始画不好不要气馁,只要勤奋,明天的你永远会比今天的你要进步得多。

 

原文地址:站酷

作者:牙线姐姐

 转载请注明:学UI网》如何画好一组线性图标

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



如何绘制功能图标基础篇?

seo达人


想想图标的绘制也是有历史的,从刚开始ps用面切法运用布尔运算去切,有时候线条也是用面切面得到。随着线性图标的火爆和普及,开始放弃面切法,转用钢笔工具直接绘制,还可以很好的控制线的直角和圆角。当你会使用Ps绘制图标了,换成ai你会发现更加的快捷方便。随着Sketch软件在界面设计中有一席之地,在Sketch里快速绘制图标也是设计师需要掌握的一门技能。

 

图标的绘制方法有面切法,钢笔绘图法,锚点法,圆切法。

下面会从Photoshop、Illustrator、Sketch三个软件去细讲基本软件工具。绘制案例想了很久要含有基本的知识点,使用更多的工具。最后选择的图标为齿轮、信号,其中齿轮是最经典的案例了,也是绘制图标的必修课。

 

一、 Photoshop篇

在ps里面绘制图标使用的基本工具有小白、小黑、布尔运算、钢笔工具、锚点。

 

1.1 第一步打开ps,ctrlk,勾选将矢量工具与变化和像素网格对齐。

 

 

1.2 小黑、小白二人转

 

1.3 钢笔工具、贝塞尔曲线

贝塞尔曲线很多写的文章太官方了,不太懂,也不知道如何下手。我还是总结我工作使用中应该注意哪几点。

a、锚点俩边的手柄要保持在同一水平线上。倾斜的锚点的手柄也要保持在同一水平线上。

b、当前手柄的长度不能超越下一个锚点的水平线。

c、上下左右最边上的肯定是锚点存在的点,其他地方锚点的选择需要多练习才能找到合适锚点的位置。

c、钢笔绘制的时候尽量不要让俩个锚点靠的太近,会让俩个锚点的手柄没有施展的空间。

最后如果你感觉贝塞尔曲线还是很难,可以先用Illustrator里面的钢笔工具绘制,用多了就好了。我之前也感觉Photoshop里的钢笔工具绘制好难用,今天写教程做案例试了试还是很好用的,曲线也可以调整的很柔美。

 

 

 

1.4 布尔运算

布尔运算是通过绘制规则的形状进行合并、减去、相交、排除等方式得到新的形状。

 

 

1.5 主题图标面板绘制

在主题设计的时候大神们的底板用的都很有特色。

 

 

1.6 齿轮、信号案例演示

 

二、 Illustrator篇

在ai里面绘制图标使用的基本工具填充、描边、钢笔、路径查找器、形状生产器、对齐、锚点圆角、扩展。

 

2.1 cc2015自带直角变圆角。

 

2.2 路径查找器的形状模式等同于ps的布尔运算(上面已讲),路径查找器下的6个工具在平时使用较少所以就忽略,感兴趣的自己研究下。钢笔锚点和ps使用是一样的。

 

2.3 路径描边可以通过扩展让线变成面,但是在绘制线性图标时不要把线进行扩展,因为放大缩小不会改变线的粗细,扩展成面会随着放大缩小而发生变化。有时候我们在绘制线性图标不好做的曲线,可以尝试把这个形状画出来,然后再变成描边就ok了。

 

2.4 在绘制对称图标的时候,有时候我们只需要绘制一半,通过镜像复制,然后通过对齐-垂直或水平分布间距就可以很好的闭合在一起。( 对齐-显示选项-对齐关键对象-垂直或水平分布间距 )

 

2.5 形状生产器工具,直接可以绘制有闭合可能的所有形状。

 

三、 Sketch篇

在sketch里面绘制图标使用的基本工具编辑、旋转、钢笔、剪刀、布尔运算、外形、变平。

 

 

四、 Ai制作好如何转到Ps和Sketch?

 

4.1 Ai制作好转到Ps,在Ai复制备份一个,然后对象-扩展,ctrl+c复制,ctrl+v粘贴到Ps里面选择形状图层,不要选择智能对象。再用小白工具调整细节,让每个锚点都和像素网格对齐。

 

4.2 Ai制作好转到Sketch,ctrl+c复制,ctrl+v粘贴到Sketch,调整参数尽可能是偶数整数。因为大量存在小数点的问题。改变数值还是要看下一图标整体感觉。

 

 

五、 如何达到视觉平衡?

很多人刚开始不会说按照规范来,主要在固定大小里面绘制就好了,其实这样也可以,但是最终还是个别微调图标达到视觉上的统一。

比如在56*56px固定大小的区域绘制好全部图标,不要超出这个范围。然后整体看哪些视觉比重大需要缩放,缩放是以2的倍数放大缩小。

56-2的倍数 比如56px,54px,52px…

 

 

六、 如何定义规范?

比如在一定大小内,如何制定出一像素?

以48*48大小为例。看似留了一像素,上下左右还是俩个像素,跟上面的视觉平衡是一样的,都是以2像素为一个基准。这种规范大一点的尺寸也是适用的比如88*88px。

 

 

七、 如何统一风格?

图标的风格我在《如何系统学习功能图标》基本都概括出来了,可以分析总结每个风格的特点,快速的制作,也有不少人发我看他们绘制的图标,会用到俩三种风格同时用到图标上面,还有就是总结出来的还没尝试学会就开始自己去尝试新风格,尽量还是不要先去尝试新的风格,之前整理的应该够用了。

 

 

总结虽然讲的都是简单的基本教程,但是也是必须要掌握的,掌握上面基础教程不单单只适用于图标,在插画,图形绘制中都可以用到。这边教程ai方面相对篇幅较少,Ai和圆切法没有写到,会在下篇《如何学习yoga style?》中详细讲解。最后感谢大家收看。

 

原文地址:站酷
作者:水手哥

转载请注明:学UI网》如何绘制功能图标基础篇?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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




日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档