首页

详解|针对某个功能,如何做竞品分析和设计优化?

seo达人


  • 案例    设计需求是:优化一款 B 端产品的「套餐售卖卡片」的原有设计:

图片

△ 某 B 端产品服务购买卡片设计(优化前)

 

你会觉得这个设计无伤大雅,但也说不上专业。于是设计师参考阿里云和华为云的服务购买卡片:

图片

△ 阿里云服务购买卡片设计

 

图片

△ 华为云服务购买卡片设计

 

经过了对信息层级视觉效果的比较与思考,设计师最终将设计稿优化为下图效果:

图片

△ 某 B 端产品服务购买卡片设计(优化后)

 

这里的 “参考” 并不是简单的照猫画虎,而是站在巨人的肩膀上,学习和精进自己的能力与认知。
今天给大家详细的介绍下,针对某个功能或元素,如何借鉴和分析竞品。有以下几个方法:
  1. 分析几乎完全相同的产品
  2. 分析不完全相同的产品
  3. 分析完全不相同的产品

 

1. 分析几乎完全相同的产品

这个方法很好理解,这类产品与你正在设计的产品在功能需求、产品形态、用户类型等方面都很较大的相似性,也是最容易直接提供解决方案的,比如上文提到的服务卡片设计优化案例。再比如,你在做一款「云盘的登录注册页面」,你可以参考「腾讯云盘」和「华为云盘」等大厂产品的登录注册页面,看看他们的页面是怎么布局的,提供了哪几种方式,增加了哪些入口和元素,如何使用颜色和字号等等。图片

△ 华为云盘登录页面

 

图片

△ 腾讯云盘登录页面

 

2. 分析不完全相同的产品

如果找不到完全相同的竞品,对于不完全相同的产品,也可以分析和借鉴,这就要分几种情况,需要你对手中的设计任务进行拆解:

(1)需求相同,但产品类型不同:比如同样是「云盘的登录注册页面」,如果找不到完全类似的竞品,你可以查找包含 B、C 端用户的其他产品的登录注册页面,取长补短。

图片

△ 雨雀文档登录页面  

 

(2)结构相同,但应用场景不同:接上面的例子,登录和注册页面本质上用户填写表单,产品收集用户信息。因此你也可以找填写手机号、用户名、密码相关的表单的设计,并不一定是登录注册页面的表单,比如你在寄送快递时填写手机号的表单也可以用作参考,也许会提供不一样的设计思路。

图片

△ 淘宝 App 可以调动系统定位,并提供几个最有可能的选项,用选择代替用户输入

 

3. 分析完全不相同的产品

如果是完全不相同的产品,那学习和分析的是这类产品的设计原则和手法。接上面的例子,这次你可能借鉴的设计就是下图中「微信通过好友申请」的页面。

你会发现在这个页面中微信将能设置的好友信息都呈现了出来,让用户先设置之后,再通过申请,这样就避免了很多用户顺手添加了好友而忘记设置信息。相比之下在设计登录注册页面,可能也可以根据产品功能和用户需求,适当将设置项前置图片好的设计,在设计思路和原则上,通常也会具备通用性。对于大多数人来说,在很多工作上都要经历这个过程:抄(指学习) -> 操(指操练) -> 超(指超越) 掌握这几个过程中的精髓,很重要。

 

原文链接:长弓小子公众号)

作者:元尧

转载请注明:学UI网》详解|针对某个功能,如何做竞品分析和设计优化?

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

截屏2021-05-13 上午11.41.03.png

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

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



这6种高级黑配色套路,太绝了!

seo达人



图片

黑色+白色

图片黑色是一个很强大的中性色彩,它有一种极其特殊的色彩语言,它很容易让人着迷,而且受到各领域众多设计师的关注。黑色给人传递的是一种庄重、神秘、稳重、高端、大气等等的一系列视觉感受。因此我们在用黑色作为主色调的时候,需要注意产品性格特征,想传递什么样的感受给用户。图片
图片
在杂志化版式设计中,黑色和白色搭配出现频率也是较高,毕竟黑色本身就有一种高级神秘感。当它与白色搭配,更体现极致简约性格。
图片
图片
图片
图片

图片

黑色+蓝色

图片

蓝黑搭配也是最好看和运用较多的颜色,它们之间组合彰显沉稳大气。黑色本身更沉稳,配上蓝色整体画面感彰显高级时尚。

图片

图片

蓝黑搭配一般在科技类产品较多出现,因为蓝色本身略带一些科技属性,黑色本身会有一些沉闷,且蓝色也不像黄色那样高亮耀眼,因此在选择蓝色上适当提升一些明度。

图片

图片

图片

图片

图片

图片

黑色+橙色

图片

橙色是一种有性格的颜色,当它遇上黑色,在画面彰显活力与生机,与蓝色不同的是,橙色更醒目与热情,更有一丝腔调,内敛和张扬得到有效平衡。

图片

图片

活力橙色作为暖色调,它不像红色那样更霸气刺激,更纯粹的多了些许阳光的温暖,在不同层次明暗橙的对比演绎出柔和的色彩变幻以及熠熠闪光的细微差别。

图片

图片

图片

黑色+绿色

图片

绿色在设计圈可谓说是一直都挺火,绿色与黑色搭配可以中和黑色的沉闷,还有一种清新透亮的感觉,如果是和亮绿搭配,更有一种酷酷的潮流感。

图片

图片

图片

图片

图片

图片

图片

黑色+黄色

图片

黑黄搭配,极视觉冲击力,既能给人活泼奔放的味道,同时又有着一丝内敛与沉稳。很多设计中经常看到黄黑组合,黄色在黑色的存托下,显得格外时尚。

图片

图片

图片

图片

图片

黑色+红色

图片

红色与黑色的配搭,在设计界也是运用较多的经典颜色组合。黑色的神秘而高级,略带一丝沉重,配上热情奔放的红色,缔造了一种无与伦比的时尚,成就了一种永恒的经典。

图片

图片

图片

在使用红黑搭配时,注意红色使用占比,以及饱和度,避免过于高亮的红色。一般在黑红搭配过程中,其实都少不了白色在其中。

图片

图片

原文地址:功夫UX(公众号)
作者:功夫UX
转载请注明:学UI网》这6种高级黑配色套路,太绝了

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

截屏2021-05-13 上午11.41.03.png

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

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


UI&UE实用方法论 | 做交互体验,你必须得知道的「多尔蒂阈值」

seo达人



美剧《奔腾年代》(Halt and Catch Fire)里有一段台词:

“当你使用计算机执行一系列操作,每当你按下回车键,它都能在400毫秒内给予你反馈,反馈时间还不到半秒,那么就可以让你一直保持专注,效率也会飙升,你会完全沉迷进去。但反馈时间哪怕只是偏差到半秒钟,你的注意力都容易被分散,你甚至会想起身洗个碗、拿个遥控板、看场比赛…所以说400毫秒以下的反馈速度,是最佳节点。”

当然翻译中带了点我个人的语言色彩,但意思还是这么个意思,也就是说当交互反馈时间小于400毫秒,那么将大大提升用户的专注程度与效率,用户也不易急躁。而大于400毫秒,即使仅仅是偏差到半秒钟(500毫秒),也容易被用户感知到,从而影响用户心流。

而剧中引用到的这个临界值“400毫秒”,就是我们今天要聊到的——多尔蒂阈值(Doherty Threshold)。

 

一、为什么是400毫秒

1982年,IBM公司的WJ·多尔蒂(WJ·Doherty)及其团队就“系统响应时间对经济价值影响”的课题展开了研究。研究过程主要以用户操作系统后,系统的响应时间作为变量,观察其对多个维度的结果产生的影响。

最终从其中的一组研究实验结果中观测到了一个现象:一旦当系统响应时间超过400毫秒左右时,各项指标数据就会开始产生较大数值的波动。

于是IBM公司就此提出了研究结果:系统响应时间应该低于400毫秒,这将显著提升用户的关注度,从而影响到用户的操作、工作效率。并将“400毫秒响应时间”这个节点值以WJ·多尔蒂的名字命名为「多尔蒂阈值」。

虽然如今我们早已认为系统拥有快速响应时间是一件理所应当的事情,但「多尔蒂阈值」的提出,在当时那个年代却是开辟先河性的。因为70年代左右,计算机研究界还普遍以“系统的响应时间可以为2000毫秒(2秒)”作为业界标准。

虽然我现在已经查询不到这个“2秒”旧知识的科研文献了,但是在 IBM 2018年的一场欧洲线上演讲会的PPT中我们还可以看到:

所以「多尔蒂阈值」可以说是重新定义了现代人机交互领域响应体验的指标,影响着一个标准规范产品的视觉侧、交互侧、体验侧、开发侧等多个方面。

 

二、多尔蒂阈值的运用

我们要清楚的是,「多尔蒂阈值」是IBM公司给到的一个系统响应时间的最大参考值,并不是说所有的机器响应时间都必须卡在400毫秒这个节点上,而是说响应时间应保持在400毫秒以内,尽量不要大于400毫秒。

那么知道了“400毫秒以内”这个范围值,我们作为设计师,要怎么将其运用到设计工作中,或者说「多尔蒂阈值」会影响到我们哪些设计标准呢?——来看看 Google 旗下 Material Design 的系统动作规范,应该能让你找到一些方向。

 

要点一:并不是越快越好  

作为设计者、开发者,我们都希望系统能够尽量快地响应用户的操作。但也并不是一味地追求极速就一定是好的。

Material Design 在系统响应动作规范中强调了“过渡时间”的概念,虽然大家都希望系统的响应速度越快越好,但同时用户也需要一些时间去理解系统响应的结果。

如果响应即结果,而不给用户一个视觉过渡的反应时间,则会让用户无法跟随UI变化,同样也是会给用户造成困扰的。

Material Design 规范建议到:不要给用户过慢的响应速度,干扰用户操作进程,让用户急躁;但也不要给用户过快的响应速度,用户无法跟随UI变化,对用户理解会造成困扰。

我们将响应速度结合「多尔蒂阈值」范围内的视觉过渡效果,可以帮助用户理解操作反馈的结果,有时间思考类似于“我刚才点击了什么”、“结果和我的操作之间是什么关系”、“结果是否满足我的预期”等问题,并做出下一步的反应。

 

要点二:响应时间不是一成不变  

为了让响应视觉过渡更加符合现实规律,Material Design 根据响应结果区域的大小设置了3种响应过渡时间规范,其中又以用户的操作场景进行了更进一步的规范细分。

先来说说根据响应结果区域的大小设置的响应过渡规范:Material Design 将操作响应结果区域分为小、中、大3种场景,当操作影响的结果区域越小,那么响应过渡时间就应该越短。反之,操作影响的结果区域越大,响应过渡时间就会越长。这一点是符合人类意识对运动的理解的。

其次 Material Design 还认为,用户做“关闭”、“退出”类操作时,预示着他们那要进入下一个任务流,而此时上一个任务流的内容,用户就不再关注了。操作与结果的关系、层级的关系、内容的位置关系,在“打开”、“进入”类的过渡中就已经阐明给用户了,所以他们离开的时候,可以更快。这就是在响应结果区域大小的基础上,又以户的操作场景进行的更进一步的规范。

 

  • 小型区域:响应过渡统一为100毫秒;

 

  • 中型区域:打开的响应过渡为250毫秒,关闭的响应过渡为200毫秒;

 

  • 大型区域:打开响应过渡为300毫秒;关闭响应过渡为250毫秒。

结合两个要点总结一下:系统响应应该结合视觉过渡给用户操作与结果的关系进行指引,所以也并不是越极速越好。响应过渡应该在「多尔蒂阈值」以内,并且可以结合响应区域大小、用户操作场景,使响应更符合现实规律,更加人性化。

 

三、面对不可避免的延时响应

虽然把系统响应控制在「多尔蒂阈值」内是我们追求的目标,但是响应速度往往和请求的数据量、网络环境等诸多因素有关。对于结果返回数据量小的场景,我们利用视觉或代码层面的解决方案,可以让响应时间是可控的。

但当用户遇到结果请求数据量大、网络环境较差等场景,响应时间以“秒”起步那也是司空见惯的事情。此时面对无法保证响应时间在“400毫秒”以内的情况,我们应该怎么办呢?

其实这已经超过「多尔蒂阈值」的讨论范围,对于不可避免的延时响应场景,已经是属于“如何解决用户等待焦虑”的话题了。

但恰好我之前在《聊聊加载等待的那些事 之 进度指示器》中聊到过这个话题。想系统了解的朋友,可以移步查看。(知识就这么串联起来了!神不神奇~)

对于想走捷径的同学,我在这里把当时的调研结果贴出来,希望能够帮助到你们。

我结合了 “用户等待4秒原则”和UX研究咨询公司 Nielsen Norman Group(NN/g 尼尔森诺曼集团)的一篇文献中提出的 用户等待心理模型,得出了以下参考结论:

用户是一个复杂的群体,他们其实并不关心所谓的量化时间,他们只希望:加载尽量快,快到不要中断我的操作流,如果实在快不起来,那就告诉我还要等多久。所以由上表得出的结论是:

  • 加载时长在0到1秒之间时用户不易感知,不需要给予用户 loading 提示,在任何加载情境下频繁给出 loading 提示其实反而会干扰用户心流;
  • 加载时长在1秒到4秒之间时:此时不需要明确给予用户量化时间提示,用户也不易产生焦虑情绪;
  • 加载时长大于4秒时:超过这个时间你就需要明确地告诉用户当前的进度状况了,加载百分比或剩余时间都可以让用户心里有个底;
  • 加载时长大于x秒时:设计者应该根据具体加载场景设置加载时间临界点机制,在加载超过这个时间之后默认为加载失败,让用户进行再次操作,而不是无意义地苦苦等待。

 

四、总结

「多尔蒂阈值」不仅仅是设计师完成交互动效、反馈体验时的一个知识点,它是IBM对整个计算机反馈机制进行研究之后得到的结论,影响体验、效率、经济等多个方面。所以我认为这是互联网人都应该熟知的一条交互理论。

只是我在这里仅结合了 Material Design 的系统动作规范,分析了设计层面对「多尔蒂阈值」的应用,还是稍显片面。但感兴趣的朋友,还可以去搜索了解更多关于「多尔蒂阈值」的实验、故事与实践方案。

 

原文地址:UCD耍家(公众号)

作者:Howiet


转载请注明:学UI网》UI&UE实用方法论 | 做交互体验,你必须得知道的「多尔蒂阈值」

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

截屏2021-05-13 上午11.41.03.png

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

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


配色看起来总是不舒服?用这个科学的配色方法!

seo达人



1. 色轮分析

颜色是我们眼睛感知不同波长的方式。色轮是将一系列颜色,有次序地利用圆盘的形式展现出来,色轮颜色的构成包括三组颜色:

图片

原色:红色、黄色、蓝色

二次色(间色):绿色、橙色、紫色(三原色混合而成)

三次色(复色):黄橙、红橙、红紫、蓝紫、黄绿、蓝紫(原色二次色混合而成)

通过不断混合相邻的颜色,产生新的颜色,最终形成一个全域的色轮。

图片

▲ 色轮显示了3组颜色,原色范围最小,在圆的的中心处,二次色在中间环。最大的外圆由三次色组成。

 

2. 色彩搭配

色彩搭配最基本且重要的原则就是颜色间要相互协调,一些常见的颜色搭配包括:

图片

同类色:色轮上90°以内彼此相邻的颜色,这种颜色搭配的对比度较低。

互补色:色轮上相对的颜色,产生较高的色彩对比度,在搭配上可以一种作为主色,另一种用于强调。

分裂补色:互补色两侧相邻的颜色。这种颜色搭配既有同类色的低对比度的美感,又具有互补色的冲击力,形成一种既和谐又突出重点的颜色关系。

三色组:色轮上的三种等距颜色,相隔120度,其中二种颜色互相类似,另一种与它们形成对比关系。

单色搭配:只使用一个色相,通过改变饱和度、明度来得到其他色彩。这种搭配看上去干净、优雅,但是不容易突出重点。

引入的颜色越多,就越难平衡视觉层次。如果你有丰富的配色经验,可以从两种或三种颜色开始,不断尝试更复杂的搭配。

 

3. 色彩含义

虽然随着全球化的到来,某些颜色可能已经达到了标准含义,例如红色表示停止,绿色表示开始,但色彩含义会因文化而有所差异,例如想一下钱是什么颜色,红色(中国)还是绿色(美国)?

如果想在设计中明确解释色彩的含义,需要做到两点:

  • 颜色可能不会在全球范围内起作用;
  • 设计时考虑少数群体(色盲),进行用户测试来确保用户明确了解颜色示意。 

 

4. 将色彩理论应用到设计中

调色板是为特定项目、品牌选择的一系列或一组颜色,每个颜色都是特意添加的,整个调色板的色彩组合展现了产品或界面的视觉美感。

 

创建调色板

选择一种颜色搭配并进行颜色迭代

单色方案通常最容易创建和应用,因此如果你没有太多的配色经验,可以从这种配色开始。

首先要弄清楚为什么要选择这些颜色、这些颜色有什么作用、表现出来怎样的效果等问题,这样创建调色板才更有效率。

图片

▲ 如果在配色过程中觉得卡住了或者不知道从哪里开始,可以从ColorHunt的调色板中汲取灵感。

 

将调色板限制为三种颜色

少量的颜色加强了视觉层次和对比度,因为影响用户考虑和分心的元素更少。所有的颜色都在争夺注意力,在设计中也是如此。

图片

▲ 少即是多。过多的颜色反而会让用户眼花缭乱,找不清重点信息。

 

遵循品牌的颜色标准

创建调色板时要始终遵循既定的颜色标准,这样不仅会让工作更轻松,因为不考虑太多新的的颜色,还会给用户带来一致的品牌体验。

如果没有品牌色标准,可以看看现有设计和产品中使用的颜色,并尝试融入到调色板中。

图片

▲ 耐克的网站使用了最基本的单色调色板:黑色、白色和灰色,这种颜色选择使用户可以专注于产品。

 

使用调色板

使用60-30-10规则

这条规则仅表示主色使用60%,辅助色使用30%,强调色使用10%,通常主色和辅助色是相对中性的颜色。

这些比例有助于创造平衡,防止搭配的颜色出现混乱。

图片

▲ 苹果新闻App很好地使用了60-30-10规则,白色和浅灰色是主色调,蓝色是辅助,粉色作为强调色来吸引了用户的注意力。

 

应用然后迭代

使用了60-30-10规则后,接下来就要调整颜色来提高美感,并且突出设计中重要的内容。

看看颜色选择是否有助于创建正确的视觉层次结构、颜色选择在设计中是否创造了平衡和对比。

 

保持颜色的一致性

一致性是帮助用户理解颜色使用的关键。如果在一个页面上使用亮蓝色作为提示按钮,那么在产品的任何地方都应该使用相同的颜色作为提示。

图片

 

测试调色板

测试设计效果

将调色板应用到设计中后,需要做一些可用性测试,例如颜色在按钮、链接或其他类型组件上的可用性,页面的易读性和可访问性问题等

图片

▲ 这个页面虽然遵循了60-30-10规则,但顶部绿色的字母在橙色背景下却很难以阅读,需要调整调色板以确保页面的易读性。

 

最后

合适的颜色搭配可以增强品牌认知度,吸引用户注意力并提高可用性,静下心来多多实践,才能充分利用好这些奇妙的颜色。

最后为大家分享一波非常不错的配色方案,特别适合用在日常设计中~

下载方式:

1)关注公众号“Clip设计夹”

2)公众号后台回复“配色”自动获取下载链接

 

原文地址Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》配色看起来总是不舒服?用这个科学的配色方法!

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

截屏2021-05-13 上午11.41.03.png

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

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


苹果和三星,哪家设计强?

seo达人

图片

a

字体 

图片

第一个就是字体,大家都知道,设计其实就是形色字构质,字体是设计中非常重要的因素。2014年三星委托了一家名为 Sharp Type 的字体制造商来设计了旗下产品字体。这款字体就是 Samsung Sharp Sans,今天我们看见的字体都是这款字体。

 

Samsung Sharp Sans

图片

三星这款字体是一个几何感很强,接近完美的圆形O和简约设计感强的小写字体,特别是字母a设计的脱颖而出。

图片

三星这款字体除了用在移动端,还包括电子业、生物技术各个行业,同时还考虑了线下的印刷需要,扩展了拉丁字体系列。

图片

在首尔的街头上,物理交通工具上,这款字体都很清晰美观,和整个城市的时尚结合在了一起。图片字体不仅仅是一个字体,同时还是一个沟通工具。三星这款字体不仅用在数字广告,还包括印刷上,这个字体承载了三星对于未来的突破。三星不再是只有产品线,而是成为时尚生活品牌。图片
无论一线大品牌还是国货新潮流,都靠一系列创新商品,在这波浪潮中占据一席之地。三星 Sharp Sans 在海报上的运用,高级且现代,同时基于全球化最大的中欧俄罗斯是智能手机增长最快的,三星也单独设计了俄罗斯版本字体。
图片
在网页设计中运用,也考虑俄罗斯本土市场行情。可以看出作为一家全球的跨国公司,对于各个体验极致的考虑。Samsung One
图片

在移动端,三星使用的是 Samsung One 字体,它也是一个非衬线字体,相对于传统的衬线字体,这款字体设计更加具有人性化。

图片

苹果和谷歌早已推出了自己的字体,三星也推出了自己的通用字体,Samsung One 由三星和 Brody Associate 联手打造。超过400种语言,以及超过25000个字符,成为一套全球性的字体。从手机到电视,从笔记本电脑到微波炉,所有的三星产品都将用上这套字体。它也是未来三星视觉语言的核心。图片
Samsung One 字体设计语言有5个关键词:人文主义,易区分,通用性,专业性,清晰可扩展。图片
人文主义:笔画自然就像手写一样变化,字体具有动态角度的正方形曲线,有很大想象空间。图片
字没有的左右空间都很窄,所以有效空间非常好。图片
易区分:这个不用解释,字体大小写符号的区分。

图片

通用性:在全球各种语言环境下要足够通用。图片
专业性:就是每个笔画的设计都需要经得起考究。图片清晰可扩展:各种场景的拓展性这块需要能适用。图片
三星 One 这款字体,让整体三星设计语言在多端使用时候无割裂,设计语言的统一性有助于用户减少陌生感,提升使用效率和交互体验。
苹果 San Francisco 字体

图片

苹果在 iOS10 后更改了系统字体 Helvetica Neue 为 San Francisco,优化字体的目的是让字体保证清晰度和易读性,新的字体不管缩放如何,无论电脑上还是手表上,都能很清晰展示内容。这个字体也得到了一致的好评。
图片
Helvetica Neue 字体之前有一些设计很受诟病的地方,比如时间的冒号不居中,理想状态应该是居中,识别性和平衡感更好。图片
Helvetica Neue 之前的6和9在缩小时候容易和8混淆,但是新的 San Francisco 显示更清晰,也不容易混淆。
但是不可否认 Helvetica Neue 是这个时代最伟大的字体,因为他不止是苹果设备可以使用,在其它的场景都可以使用。也是第一个给系统设计字体的引领者,包括后面的谷歌和三星都陆续为自己的产品设计字体。

苹果和三星对于字体的设计,你更喜欢那个呢?

 

版式 

图片
三星整体的版式采用的左图右文或者右图左文,这样的设计能让用户更加关注内容,阅读也比较符合从左到右的习惯。图片这样的版式结构在全球官网设计都是类似,和苹果的上下排版不同。版式字体上也是通过字重来凸显视觉层级。图片
在电视页面中,采用的文字居中的方式,和苹果那种沉浸式大图全然不同。整体三星PC上设计略显沉迷和安静。

图片

相比如苹果大胆的设计,三星在动态设计上官网并没有体现太多,除了一个活动广告弹窗是一个动态的盒子打开。在这方面和苹果还是有点不足。
图片
图片

这两张是三星和苹果十年前的设计,从这个图中就可以看出两家设计水平差异。苹果的设计和广告语今天看起来也还不错,但是三星看起来就会觉得有些粗糙,可能10年前审美也不一样。

 

图片 

图片
图片

苹果的图片更加强调产品的实用性,以突出产品本身功能和价值为主。

图片
苹果会结合产品的特点,重点体现产品,其次生活场景。图片三星的产品图片,色调都是以生活化,贴近生活为主,无论手机还是电器。图片
注重生活化,接地气。
图片
图片

苹果的图片则不一样,和摄影师合作,每一个图片都是一个摄影作品、一个伟大艺术创作,苹果手机可以拍大片、可以拍电影等等。体现出苹果产品无与伦比的优秀,虽然他那些样品,我怎么也拍不出来。

 

最后 

图片
最后,无论是苹果还是三星,都是伟大的公司,产品服务的人群不同。苹果主要是移动端数码产品,三星覆盖全品类,两个公司用户人群不同,决定设计风格和主张不同,我们要学会去学习这些巨头设计上可取之处。随着当今智能手机水平不断提升,包括我们的华为,未来差距只会越来越小。但是随着用户审美和经济水平提升,大家对于品牌苛刻度更高,希望我这篇研究对大家有些帮助。
但是从我个人而言,更喜欢苹果,也是苹果的忠实粉丝。你呢?更喜欢哪个品牌,欢迎评论中留言哦。

 

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》苹果和三星,哪家设计强?

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

截屏2021-05-13 上午11.41.03.png



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

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



案例锦囊|设计如何为用户「节省时间」?

seo达人



1. 有效的信息抓取 

案例 1  :钉钉的“代办事项”设置功能,可以自动抓取到语句中的时间信息,自动帮助用户设置好时间,减少用户的操作时长:

图片

案例 2  :在微信中可以对图片中的文字进行识别提取,手指在识别出来的文字上滑动就能够选中,可以直接全选、复制和转发:

图片

案例 3  :不同产品之间也可以共享数据。咸鱼和淘宝订单数据打通,在闲鱼平台上发布产品时,会看到系统给出的用户曾在淘宝买过的商品,以及卖出这些商品的预估价格,便于用户直接拍卖:

图片

  案例 4  :支付宝拍照添加银行卡可以使用拍照功能,由系统识别银行卡号和开户行,减少用户的操作时长:

图片

 

2. 避免重复阅读和操作 

案例 1  :爱奇艺在剧集片头处,都会弹出提示,选择“跳过片头”,即可设置该剧跳过片头:

图片

案例 2  :微信的朋友圈在退出后再次进入时,会在内容流中间出现一个“跳到还没看的位置”,帮助用户快速定位之前离开的位置,不必阅读重复内容:

图片

案例 3  :在微信群聊天记录中,如果有太多条内容未读,会在右上角标注出未读数据,点击之后即可从未读的地方开始浏览:

图片

 

3. 减少错误的可能性

案例 1  :在恶劣天气,美团先让骑手接单,再让商家接单,可以避免无人配送的情况:

图片

案例 2  :高德地图 App 会预估并提示行驶路程何时会拥堵,让用户提前有心理准备和预知:

图片

案例 3  :微信在你没有领取对方红包时,会给出红包即将超时的提醒。点击“转账”链接,会直接定位到转账对话的位置,防止用户再次花时间处理:

图片

案例 4  :美团的新单车是在 App 上关锁,不再需要在单车上手动关锁,解决了用户骑行完成,忘记锁车还要跑回去的问题:

图片

 

4. 用选择代替输入

案例 1  :饿了么可以记录你每次写的备注,在下次填写备注时可以快速选择输入,不需要用户做多余的输入:

图片

案例 2  :在携程 App 中填写姓名拼音信息时,系统提供了一键转拼音的功能,同时对于多音字还能够自动为用户提供选项判断,提高用户录入的效率和准确率:

图片

案例 3  :京东 App 对商品进行评价时,底部会提供一些评价标签,既能引导用户进行规范评价,又能提高用户的填写效率:

图片

案例 4  :微信钱包的钱转账到零钱通里,有一个“全部转入”的快捷选项,减少了用户输入时长:

图片

 

5. 提供下一步路径入口

案例 1  :高德地图搜索路线,会自动提供哈罗单车和地铁的扫码快捷路口;支付宝出行支付地铁票成功后会看到附近的网约车信息提醒,可以立即使用高德地图进行打车:

图片

案例 2  :蚂蚁森林新增了 “找能量“ 的功能,点击会自动跳转至有能量可偷的好友的森林界面,多次点击随机跳转,直至所有好友的蚂蚁森林可偷能量被偷完,偷能量也可以省时高效:

图片

案例 3  :得到 App、大众点评等产品,会在截屏时直接提供分享入口,帮助用户做下一步分享:

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|设计如何为用户「节省时间」?

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

截屏2021-05-13 上午11.41.03.png

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

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

如何排版更高级?带你重新认识宋体字排版!

seo达人



图片

 

宋体的起源和发展

雕版宋体字的形成 

在印刷术发明之前,书要一字一句用手抄写,费时费力。而唐代发明的雕版印刷术,使书籍由手工抄写进入印刷复制时代。

图片

现存最早的雕版印刷品是唐代咸通九年的《金刚经》

 

宋朝体

到了宋代,雕版印刷迎来黄金时代,但此时的字体也并非我们熟知的“宋体”,而是以唐代大家的楷书字体入板,并且不同地区入板的字体也不同。

图片

浙江刊本–《姓解》

 

图片

四川地区 – 《开宝大藏经》

 

明朝体

明朝体是中国明代木板印刷中出现的字体,也是现今大众所认知的“宋体”的原型。虽然明朝体逐渐失去宋朝体所特有的风格,但由于易于凋刻,字形便于走刀,能满足当时的印量而得以发扬。

图片

《南齐书》 –明朝时期的南京国子监刊本

 

清代宋体字

在康熙中期以后逐渐形成清代的风格,此时的宋体字更加成熟、精致。乾隆时期,宋体字大体定型,与现代宋体字基本相同。

图片

《学统》清康熙刻本

 

综上所述,我们可以知道宋体字不是宋朝的字体,而是汉字字体中的一种风格类别。而在日本以及港台地区,宋体字也被称为“明朝体”,“宋体”与“明体”本为一物,是由于文化差异所带来的名称上的差异。

 

现休宋体

如今,为了适应印刷和电子屏显示的需要,宋体又被进行了一番改造。现代型宋体的几何特征更为明显,笔画更为利落冷峻,为了可读性,文字胸线也较大,更加符合现代设计所需要的明快感。

图片

以宋体为基础发展出许多新字体,各大字库也开发有各有特点的宋体。包括老宋到新宋,再到仿宋,从用于标题的粗宋、中宋,到用于正文的书宋,成为一个完整的字体系列。笔画较粗的宋体适合用做标题,醒目大方;笔画较细的宋体,拥有很高的阅读性,主要用于正文排版。

图片

根据中宫和体饰等特点,可以大致地将宋体分为传统型宋体、中间型宋体、现代型宋体:

图片

图片

图片

图片

目前可免费商用的宋体字非常稀缺,

推荐9款免费商用宋体。

图片

 

宋体的使用场景

传统、历史

传统宋体的笔画结构带有手工雕刻的痕迹,几百年的文化沉淀,加上字体本身的特征,使得宋体用于传统、历史题材的设计中,可以体现出古朴的传统文化感。

图片

图片

 

文化、艺术

宋体由于继承了自然书写的痕迹,又具有精致的装饰性美感,运用在文化艺术等题材,具有强烈的人文气息,充满文艺范。

图片

图片

 

典雅、高贵

宋体字方正平稳、对称均衡的字体结构,显得端庄典雅,舒展大气。常运用在要体现高端、雍容、典雅、华丽的设计中。

 

女性、优雅

宋体在工整中充满人情味,有着很强的韵味感和精致美感,带着几分女性的温柔与优雅气质。所以很多和女性相关的设计都会使用宋体。

图片

图片

 

时尚、前卫

现代宋体笔画呈几何化结构,相对于传统宋体的温情,现代宋体更加的冷峻,细腻中透露出时尚前卫的风格,具有时尚感与精致的印象。

图片

图片

 

宋体搭配推荐

案例一

使字体搭配协调的一个基本原则就是选择风格相近的字体。使用同一字族里的字体进行搭配,是最简单、安全的搭配方法。所谓字族(font family)即一款字体下的多个子字体,如思源宋体字族从细到粗共有七款字体,风格协调统一。

图片

使用中西文组合排版时,西文尽量不要使用中文自带的字体。宋体常与衬线体相搭配使用,因为两种这字体无论在笔画特征,还是气质上都很相似。如本案例使用的是西文字体“Times New Roman”。

图片

在编排时需要形成视觉层次,通过字体的大小、粗细、颜色等方式来给版面带来阅读的层次感。

图片

 

案例二

搭配不同的字体时,要注意他们之间的包容性,既要有所区别又要统一和谐。书法字笔画变化丰富且非常具有视觉冲击力,通常会搭配同样具有历史文化属性的宋体字形。

图片

西文则选择与宋体对应的衬线体,与书法字形搭配。

图片

根据书法字的结构和笔势,通过对文字大小、位置的调整,进行编排,让文字看起来更紧密也更有节奏感。

图片

 

案例三

在进行时尚类的设计时,可以选择现代型宋体,西文字体则可以搭配几何衬线体。本案例使用方正风雅宋和Didot进行搭配,这两款字体简约的几何造型和粗细对比强烈的笔画,细腻中透露着时尚前卫的风格。

图片

黑体与宋体的混搭是很常用的一种搭配方式,需要注意的是尺度的把握,适当的对比能够为版面带来更丰富的视觉印象,但对比过度也会产生凌乱感。

本案例选择较细黑体进行搭配,字形形成了微妙的对比,较细的黑体还有着高雅、精致的气质,运用在具有女性时尚特征的设计中相得益彰。西文则选择和黑体相对应的无衬线体。

图片

编排效果:

图片

如果感觉排版太过于规矩,可以尝试加入手写体加强字形对比,打破呆板感,营造更强烈的动感。

图片

在进行设计时,不管是中文与中文还是中英文搭配,都是需要经过仔细分析和不断练习,才能达到和谐统一、层次清晰而美观大方的效果。

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》如何排版更高级?带你重新认识宋体字排版!

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

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

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

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


最近超火的“彩虹光感”,别告诉我你是最后一个知道的

seo达人


什么是彩虹光感?

图片
彩虹光感也是最近这一年左右在设计圈蔓延,然后至今发现越来越多的设计师喜欢上这样的风格,也许是因为单色渐变或者黑白灰看腻了,从而去选择一些更能在平凡中凸显竞争性彩虹色彩。
图片
彩虹光感的形成,一般由多种色彩叠加混合而出来,通过色彩柔和过度或者扩散开的方式处理形成。这种色彩出来的效果十分惊艳,艺术感十足。
图片
Microsoft Office 365
譬如之前微软一只影片里面,应用到了彩虹色彩搭配思路。在玻璃拟态轻质感的加持下,视觉效果让人眼前一亮。
或许有些设计师觉得彩虹光感,会有些花哨且也不高级。其实在在同质化严重的今天,尝试下新的视觉表现形式,未必是坏事,也许它可以让你的设计脱颖而出。
图片
英国约克郡雕塑公园的旧教堂
艺术家kimsooja 用彩虹色灯光,为教堂带来新的生命力。在这种环境中,似乎让我们感受到了色彩呼吸的声音,放下生活中的杂事,聆听色彩在歌唱,开始静谧冥想。
图片
apple watch
就连苹果的硬件产品设计,也采用了彩虹色彩搭配,这种与众不同的新鲜感,有网友直呼太美了吧。也正是因为彩虹色的活力与年轻化潮流,受到越来越多人的关注。

 

彩虹光感的特点

彩虹光感由自然界中真实存在彩虹演变而来,如今在数字设计中越发广泛的使用。因其特殊的效果,以及迷人般的色彩弥散处理,使得这种色彩虽然混合多种,也不会让人产生厌倦感。
图片
untitled macao
基于目前彩虹色彩应用案例,我们可以分析出这种风格最大特征点有:丰富、多彩、年轻、活力、细腻的质感、充满想象空间以及有一些疯狂特征,似乎有着为年轻一代而出的风格。
图片
图片
其实在早期从20世纪70年代开始,彩虹色彩就受到摇滚乐队的喜爱,以及一些电影霓虹灯效果演变,也有些彩虹色彩踪迹。
图片
摇滚音乐CD封面
直到今天,彩虹色的再次复兴,已经延续到众多领域中,例如装置艺术,艺术展览以及产品包装、音乐节海报等各种领域的渗透,我想我们是时候思考它的价值以及接下来潜力。
图片

图片

untitled macao
图片

 

彩虹光感的应用

如今不论装置艺术,还是数字设计,彩虹色彩搭配都能有眼前一亮感受,这种效果不仅 能打破 枯燥配色,还可以活跃氛围感,特别是一些涂鸦类型艺术装置等、音乐海报、酸性风格和平面设计等大量出现,下面挑选一些优秀领域应用案例和大家分享下。
#1. 平面中的应用
图片
图片
图片

图片

图片

Behance/Canwei Lai 赖灿伟

 

#2. 包装中的应用

图片

图片

图片

 

写在最后

彩虹光感慢慢开始成为流行文化中的一部分,特别是演艺海报与展览装置艺术等都在大量出现。这种色彩搭配的出现,更是一种前所未有的改变与突破,大胆而张扬的精神,极具吸引力。

个人觉得彩虹光感的配色,可以让产品在竞争中脱颖而出,彩虹色更有着年轻活泼的寓意。如今看到一些营销,也在为Z世代年轻人打造产品,将彩虹色应用在产品中也是一种突破窘境的手段。

 

原文地址:功夫UX(公众号)
作者:功夫UX

转载请注明:学UI网》最近超火的“彩虹光感”,别告诉我你是最后一个知道的

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

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

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

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



系统化思维如何辅助设计实现

seo达人



“文中示例相关数据都为模拟数据,而非真正的商业数据,以此声明”

 

先给大家介绍一下酷大师的背景:

1. 酷大师产品定位:面向设计领域的在线建模工具和内容平台。

2. 酷大师当前阶段:0-1搭建并完善用户体验闭环。

3. 酷大师阶段目标:服务用户增长的同时,提高用户留存。(站点留存→引流→工具留存)

在一周一迭代,交付任务紧的敏捷流程中。以下是我们在其中的一些实践:

 

1、以系统化的视角来分析业务

酷大师项目启动至今,已经大致完成了站点从0-1的内容搭建。站点的主要模块包含:首页、模型广场、工作台、帮助中心、活动中心、课程中心。他们相互独立,又相互影响。独立好懂,聪明的亲们通过名字就能猜出各个模块的功能,并且这些功能彼此都不可替代。那么他们是怎么相互影响的呢?这里引出一个词:系统化

请看下图:

图片

同样一个事物,独立的看,和把它放到一个系统中看,我们可能会有不同的理解。同理,当我们把酷大师站点当作一个系统来看时,再结合我们的业务指标,我们可以把这个系统转译成如下模型:

图片

从抽象到具象,我们把整个模型分为三个指标类型:

  • 1、核心指标:整个项目为之负责的目标,是评判所有项目行为的基本准则。
  • 2、策略指标:影响核心指标的所有变量集合,是基于产品策略拆解出来的二级支撑性指标。
  • 3、行为指标:随着策略指标的精细化,产品的策略指标最后都会对应到一个或者多个具体的用户行为指标。

我们可以通过模型找到影响业务核心指标的重点发力板块,也可以通过最底层的行为指标去反推上层的策略指标,进而量化设计价值。到这里,我们也就可以在这个系统中,找到对核心指标影响较大的策略指标,他们分别是:注册UV数、站点引流UV数和客户端引流UV数。这三个策略指标对应的产品板块分别是:游客页、详情页和工作台。他们就是设计接下来需要在酷大师众多产品模块中着重发力的项目。

 

2、以系统化的方式来分析用户

说完了产品目标和拆解,我们来看看用户。市场和用研同学往往可以在项目前期给我们输入很多关于用户的数据,在项目初期,我们可以把这些信息抽象成几个有代表性的关键词。下图是酷大师用户关键词,可以帮助我们定制大的设计思路,不过在一些更细的业务场景中,这些信息并不给到更清晰的设计指导。

图片

所以在此基础上,我们可以把这些信息作为一个一个的内容切片,通过不同的标准来重新组织这些切片,进而得到一个相对系统化的用户信息。

我们换一个维度,再做一次梳理分析:

图片

可以看到,当我们把酷大师用户以不同阶段做划分,从新游客到资深用户,不同阶段的用户对于产品的诉求有着明显差异性。游客和新用户更注重价值和需求的匹配;资深用户更注重实际产品价值的最大化。并且我们对于不同的用户群体,需要对应不同的产品策略,甚至不同的“端”来承接用户需求。到这里,我们已经可以通过以上信息,在产品的不同链路里规划不同的设计策略了。

不过有时候需求对标的用户群体比较聚焦,以上信息还是不够说服我们自己的话,还有最后一个技能,就是找到和需求高度对标的用户(注意,是高度对标),和他们深度交流,为他们做用户画像:

图片

(图中为虚拟数据,仅供参考)

 

PS:这里的用户画像需要根据实际的业务需求来针对性的采集信息,这是一个比较灵活的过程,需要设计师拿捏其中的尺寸。

通过以上三个维度的用户数据,我们就可以根据产品的不同模块,找到对标的用户群体,然后为其做对应的设计策略。

接下来就是第三步:

 

3、以系统化的思维规划设计策略

面向资深用户的设计策略(以客户端改造为例):

通过用户访谈和调研结果看,如果用一句话来描述酷大师客户端的用户特点的话,应该是这样的:

图片

基于用户特点和业务诉求,我们再结合服务模型,我们可以一步步推导出我们的设计策略。

图片

(图中为虚拟数据,仅供参考)

 

当设计策略明确后,结合实际的业务需求,接下来就是有的放矢的设计实施过程。

面向新用户的设计策略(以游客页改版为例):

回想我们的生活,最吸引用户眼球的传播方式是什么?思前想后,我觉得是电视直播,因为通过它,自诩谨慎机智的我买了人生第一箱「生发水」…

  • 1、你是否有脱发的烦恼? → 诉求
  • 2、用了一堆产品,却迟迟没有效果? → 顾虑
  • 3、我们有北美硅谷防脱技术+南亚失传生发秘方! → 优势
  • 4、主持人和甲方撕破脸,工厂紧急调货、买一送五!!! → 驱动

事实证明,「生发水」没有白买,因为后来我发现这和酷大师游客页的业务目标几乎一致:“在没有互动的情况下以很短的时间把用户从游客转变为消费者。”

通过前面的用户分析我们可以知道:对于酷大师的游客用户&新用户而言,他们更多关注于产品价值和自己需求的匹配程度。

那么如何在短时间里向用户传达信息,并促成注册转化呢?

我们从诉求->顾虑->驱动三个维度来去组织我们的优势信息。

因此在面向此类用户时,除了对他们介绍酷大师的共性价值外,需要重点介绍酷大师的差异性价值,以及足够有吸引力的驱动利益点。

如下图:

图片

基于上文分析,我们再基于目前产品可提供的能力范围,结合用户反馈,把信息和用户需求做一一对应,然后再给出设计解法。

设计实现:

正所谓:条条大路通罗马,各个小道奔安康。只要设计策略是正确的,那么具体的设计方案就是合理的,篇幅有限,这里就不做展开。

图片

 

4、以系统化的模型验证设计成果

万物皆可度量,设计并不例外。系统是度量设计成果的最好“尺寸”。

怎么度量?还记得最初的指标模型么?

  • 1、通过技术手段监控用户的行为指标:“按钮点击、停留时长、滑动屏数、返回&跳出率…”
  • 2、通过行为指标反推对策略指标的影响。“按钮点击提高 → 页面引流效果提高。”
  • 3、通过AB测试、上线前后变量监测等其他手段,对比出设计在数据上带来的变化。

通过以上方法,我们可以直观的看到设计在整个项目中的贡献。

那么在酷大师项目中,这个成果是多少呢?请看下图:

图片

ps:图中注册转化和老用户登录转化是以设计为唯一变量带来的数据提高

 

以上就是酷大师从0-1过程中的主要思考点,从前期业务拆解分析、用户调研,到制定设计策略,再到设计实施,最后到成果验证。

图片

到这里,我们也基本回答了最开始的问题:我们如何在业务迭代中抓重点,并有的放矢的“集中精力做大事”。

以这样的思路,我们就能以有限的精力,最大程度保证业务的目标的实现,也能对用户的关键路径做有效的体验提升。

 

写在最后

1):设计师不能盲目跟随需求,更不能对需求一视同仁,什么都想做好的结果就是什么都做不好。我们需要有一个自己判断标准。

2):“系统”是一个标准,也是一个视角。他影响着我们对业务、对需求、对用户以及设计的理解。

3):“系统”本身不重要,用“系统”的思维来看待事物很重要。

4):多个视角看到的东西,一定比单视角看到的更全面。

以上内容,和诸位共勉。

 

原文链接:酷家乐用户体验设计(公众号)

作者:沧耳

转载请注明:学UI网》系统化思维如何辅助设计实现

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

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

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

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



如何排版更高级?带你重新认识宋体字排版!

seo达人


图片

 

宋体的起源和发展

雕版宋体字的形成 

在印刷术发明之前,书要一字一句用手抄写,费时费力。而唐代发明的雕版印刷术,使书籍由手工抄写进入印刷复制时代。

图片

现存最早的雕版印刷品是唐代咸通九年的《金刚经》

 

宋朝体

到了宋代,雕版印刷迎来黄金时代,但此时的字体也并非我们熟知的“宋体”,而是以唐代大家的楷书字体入板,并且不同地区入板的字体也不同。

图片

浙江刊本–《姓解》

 

图片

四川地区 – 《开宝大藏经》

 

明朝体

明朝体是中国明代木板印刷中出现的字体,也是现今大众所认知的“宋体”的原型。虽然明朝体逐渐失去宋朝体所特有的风格,但由于易于凋刻,字形便于走刀,能满足当时的印量而得以发扬。

图片

《南齐书》 –明朝时期的南京国子监刊本

 

清代宋体字

在康熙中期以后逐渐形成清代的风格,此时的宋体字更加成熟、精致。乾隆时期,宋体字大体定型,与现代宋体字基本相同。

图片

《学统》清康熙刻本

 

综上所述,我们可以知道宋体字不是宋朝的字体,而是汉字字体中的一种风格类别。而在日本以及港台地区,宋体字也被称为“明朝体”,“宋体”与“明体”本为一物,是由于文化差异所带来的名称上的差异。

 

现休宋体

如今,为了适应印刷和电子屏显示的需要,宋体又被进行了一番改造。现代型宋体的几何特征更为明显,笔画更为利落冷峻,为了可读性,文字胸线也较大,更加符合现代设计所需要的明快感。

图片

以宋体为基础发展出许多新字体,各大字库也开发有各有特点的宋体。包括老宋到新宋,再到仿宋,从用于标题的粗宋、中宋,到用于正文的书宋,成为一个完整的字体系列。笔画较粗的宋体适合用做标题,醒目大方;笔画较细的宋体,拥有很高的阅读性,主要用于正文排版。

图片

根据中宫和体饰等特点,可以大致地将宋体分为传统型宋体、中间型宋体、现代型宋体:

图片

图片

图片

图片

目前可免费商用的宋体字非常稀缺,

推荐9款免费商用宋体。

图片

 

宋体的使用场景

传统、历史

传统宋体的笔画结构带有手工雕刻的痕迹,几百年的文化沉淀,加上字体本身的特征,使得宋体用于传统、历史题材的设计中,可以体现出古朴的传统文化感。

图片

图片

 

文化、艺术

宋体由于继承了自然书写的痕迹,又具有精致的装饰性美感,运用在文化艺术等题材,具有强烈的人文气息,充满文艺范。

图片

图片

 

典雅、高贵

宋体字方正平稳、对称均衡的字体结构,显得端庄典雅,舒展大气。常运用在要体现高端、雍容、典雅、华丽的设计中。

 

女性、优雅

宋体在工整中充满人情味,有着很强的韵味感和精致美感,带着几分女性的温柔与优雅气质。所以很多和女性相关的设计都会使用宋体。

图片

图片

 

时尚、前卫

现代宋体笔画呈几何化结构,相对于传统宋体的温情,现代宋体更加的冷峻,细腻中透露出时尚前卫的风格,具有时尚感与精致的印象。

图片

图片

 

宋体搭配推荐

案例一

使字体搭配协调的一个基本原则就是选择风格相近的字体。使用同一字族里的字体进行搭配,是最简单、安全的搭配方法。所谓字族(font family)即一款字体下的多个子字体,如思源宋体字族从细到粗共有七款字体,风格协调统一。

图片

使用中西文组合排版时,西文尽量不要使用中文自带的字体。宋体常与衬线体相搭配使用,因为两种这字体无论在笔画特征,还是气质上都很相似。如本案例使用的是西文字体“Times New Roman”。

图片

在编排时需要形成视觉层次,通过字体的大小、粗细、颜色等方式来给版面带来阅读的层次感。

图片

 

案例二

搭配不同的字体时,要注意他们之间的包容性,既要有所区别又要统一和谐。书法字笔画变化丰富且非常具有视觉冲击力,通常会搭配同样具有历史文化属性的宋体字形。

图片

西文则选择与宋体对应的衬线体,与书法字形搭配。

图片

根据书法字的结构和笔势,通过对文字大小、位置的调整,进行编排,让文字看起来更紧密也更有节奏感。

图片

 

案例三

在进行时尚类的设计时,可以选择现代型宋体,西文字体则可以搭配几何衬线体。本案例使用方正风雅宋和Didot进行搭配,这两款字体简约的几何造型和粗细对比强烈的笔画,细腻中透露着时尚前卫的风格。

图片

黑体与宋体的混搭是很常用的一种搭配方式,需要注意的是尺度的把握,适当的对比能够为版面带来更丰富的视觉印象,但对比过度也会产生凌乱感。

本案例选择较细黑体进行搭配,字形形成了微妙的对比,较细的黑体还有着高雅、精致的气质,运用在具有女性时尚特征的设计中相得益彰。西文则选择和黑体相对应的无衬线体。

图片

编排效果:

图片

如果感觉排版太过于规矩,可以尝试加入手写体加强字形对比,打破呆板感,营造更强烈的动感。

图片

在进行设计时,不管是中文与中文还是中英文搭配,都是需要经过仔细分析和不断练习,才能达到和谐统一、层次清晰而美观大方的效果。

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》如何排版更高级?带你重新认识宋体字排版!

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

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

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

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



日历

链接

个人资料

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

存档