广东快十开奖结果查询?:设计达人 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net 爱设计,爱分享。 Wed, 21 Aug 2019 09:02:46 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.1 运用统一与打破 解决枯燥的设计作品 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/tong-yi-yu-da-po.html //www.ksnb.net/tong-yi-yu-da-po.html#respond Wed, 21 Aug 2019 09:02:46 +0000 //www.ksnb.net/?p=30973 运用统一与打破 解决枯燥的设计作品

统一相信比较好理解,就像我们做UI设计规范一样,统一界面中常用的元素,让界面整洁统一而不导致杂乱无章。那既然要统一界面为什么还要打破呢?或许你经常听到客户说作品没有设计感,这往往是作品过于统一导致的,所以本文将详细讲解统一和打破的关系,让设计师在设计时懂得合理运用,做出更好的作品。 运用统一与打破 解决枯燥的设计作品

为什么要统一

在设计中统一并不是所有元素1:1的一模一样,它可以体现在:板式、配色、元素属性、处理手法等等,那么为什么要统一?统一的目的是什么?下面我们具体来说: 统一:让作品更整体 作品不够整体,会给人一种信息散乱、没有视觉焦点的感受;而将视觉元素进行“统一”,就能很好的解决这一现象,这无关乎技法的熟练与否,在我们的日常生活中就随处可见:比如:我们的书本排版,会有统一的页眉、页脚、段落留白、文字间距等等,其目的就有让文本内容在视觉感受上更像一个整体;下面我们看个设计中的案例: 如图所示,上侧案例给人的感觉比较杂乱,不够整体,原因在于:元素与元素之间的关联性不强,且视觉形态及色彩属性各不相同,导致整体各元素之间的呼应不够明显,所以会给人一种不够整体甚至杂乱的感觉。而下侧案例通过在形态、色彩、属性等方面的统一化处理,加强了每个单独视觉元素之间的呼应,使得画面更整体! 统一:让作品更整洁 不管是在设计工作还是日常生活中,干净整洁的东西都是更易于大众接受的,在设计工作中,做好统一是最重要的一环,在此前提下,才能做好另一环“打破”!所以当设计作品出现乱的现象时,我们需要对其视觉元素进行规整及相应的处理,比如: 通过左右对比我们发现,很明显右侧给人的感觉杂乱无章,而左侧干净整洁、有条理,原因在于: ①、元素与元素之间并不是相互孤立的,而是在视觉上存在着一定的呼应关系,相互关联,这样画面整体性也会更强。 ②、视觉上将原本各不相同的形态以及色彩重新进行了统一处理,目的是通过减少视觉元素形态及色彩变化而进一步提升画面的整洁。 ③、视觉元素在物理关系以及属性上也做到了统一,即统一元素与元素之间的间隔、形态、颜色等等。 下面我们再看组案例: 上图中,相比而言案例二比案例一给人的感觉更整洁、干净、也更像一个整体,原因在于:案例二中配图的属性做到了视觉上的统一,具体体现在:①、图片的颜色属性:统一蓝色色相属性;②、图片的内容属性:统一高端、仰视角度建筑属性;③、图片的留白属性:每一幅配图在视觉上都会有一些留白性质的属性,给人的感觉很舒服。 所以:出于让整体更整洁的统一,大多是在做减法或者合并的过程,目的是减少一些造成视觉整体杂乱的因素,比如:色彩杂乱、图形杂乱、文字形式杂乱、视角角度杂乱、以及过多无关联的视觉元素等等,统一的过程也是整合视觉元素的过程。 注意:设计中的统一并不是绝对的,而是相对的,如果所有的视觉元素、属性都严格按照统一化去处理,那么就会滋生另一个问题:整体视觉太过平滑、缺少变化甚至会给人一种单调、枯燥的感受。那么在强调统一的同时,“打破”就是为了解决这难题的。

为什么要打破

在日常设计工作中,打破是建立在统一基础之上的操作,那么既然已经做好了统一,为什么还要打破呢?打破能为作品带来什么?下面我们具体分析: 打破:提升作品视觉层次感 当作品过于统一时,很容易会给人一种单调、乏味、缺少层次变化的视觉感受,而在统一的基础上做一定的打破操作,就能起到很好的解决这一现象的作用,那么什么是打破?举几个简单的例子: 如上图所示,图①就属于过于统一的表现形式,很明显整体平淡、乏味,缺少视觉变化;而其他都是在统一的基础上做了一些“打破”的处理,只不过各自切入点不同,下面我们逐一分析: 图②:切入点是打破了一成不变的排列形式。 图③:切入点是打破了一成不变的配色形式。 图④:切入点是打破了完全统一的配色形式以及形态。 图⑤:切入点是打破了统一的元素属性值。 图⑥:切入点是打破了统一的元素属性。 以上这些虽然切入点都各不相同,但是目的都是通过打破过于统一的视觉现象,增加整体视觉变化程度,从而提升整体视觉层次感,也打破了呆板、乏味,增添了一些视觉上的跳跃性。 下面我们再看个设计中的例子: 如图所示,上侧案例属于很好的贯彻整体统一的理念,而下侧案例则是打破了固有的统一、却也保留了大部分统一的属性,通过两者对比我们发现,其实单只看这一组案例:两种表现形式都是可取的,只不过相比而言下侧案例给人的视觉感受变化更多、层次感更强,所以相比而言给人留下的视觉印象更深刻。 上面说两种表现形式都可取的前提是:单单只看这组案例,但是很显然这组案例只是页面的局部,如果整体页面都如上侧案例那样严格的按照统一进行,那么页面整体就会过于平淡、缺少视觉层次感、甚至主次不分明。 打破:划分视觉主次 在现实生活中,具有差异化的人或实物会很容易引起周围人的注意,甚至印象深刻、难以忘怀。在设计中亦是如此!其具体表现形式参考上图①-⑥,因为打破过于统一就是在营造具有差异化的视觉元素,从而会很容易在视觉上形成先后、主次之分,所以就起到了一定的划分视觉主次的作用。 注意:打破也不可盲目的进行,过于统一会单调、乏味、重复感强;而过于追求差异化也会出现杂乱、没有章法的视觉现象。所以一定要结合实际情况灵活运用。一幅作品中大多情况下:打破的次数要少于统一,即作品整体绝大不多保留整体统一的属性,通过局部打破处理提升整体出彩度,这样容易给人一种干净、整洁且不失视觉变化、层次感的感受! 不妨找一些优秀的网页分析一下,是否很多优秀的设计作品都符合这一规律?

总结

综上所述,统一是为了让作品有视觉条理性、更整体,而打破则是增加视觉层次变化,让作品更出彩!统一和打破看似是两个矛盾的名词,实则在设计中是相辅相成的作用!不管是统一还是打破,两者的切入点都是相似的,一般体现在:形态、属性、色彩、大小、位置关系、留白等等。但是无论如何统一都是打破的前提,如果作品整体性都不够,再一味的追求打破关系,只会让作品越做越乱。所以一定要先做好统一,其次才是进行打破、改变。当然文中提到的只是一部分,希望大家能活学活用、举一反三! 作者:张家彬 | 微信号:laozhang-sj


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/tong-yi-yu-da-po.html/feed 0
深色主题,42个Dark theme风格的界面设计 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/dark-theme-ui-designs.html //www.ksnb.net/dark-theme-ui-designs.html#respond Tue, 20 Aug 2019 02:14:40 +0000 //www.ksnb.net/?p=30971 深色主题,黑暗模式风格的UI设计作品

相信已有不少的APP已经开始深色主题的设计(dark theme),这个模式不仅仅是视觉外观上的升华,更能?;び没У难劬?,这个模式有很多APP界面设计是非常适合使用,比如基金、股票、视频直播、设计及开发类的界面,这种需要用户长时间盯着界面的应用就非常需要了。 ?今天为大家整理一系列使用深色主题风格设计的APP界面、后台管理系统以及网页设计作品,要做深色调的风格有很好的借鉴用途。 同时建议大家也看看关于来自谷歌深色主题设计设计规范: //www.ksnb.net/dark-theme-design.html 深色主题,黑暗模式风格的UI设计作品 01. 深色主题的日程管理界面设计

深色主题的日程管理界面设计 by??Filip Legierski

02. 货币管理界面

货币管理界面 by?Igor Kim

03. 屏幕使用时间APP

屏幕使用时间APP,by Michelle Thompson

04. 电台APP界面

电台APP界面 by Manoj Rajput

05. 深色主题和亮色调模式的计算器界面设计

深色主题和亮色调模式的计算器界面设计?by Ivan Poddubchenko

06. 时间管理工具

时间管理工具 by?Niclas Ernst

07. 无线条风格,时尚音乐界面

无线条风格,时尚音乐界面 by?Manoj Rajput

08. 深色主题展示界面?by

深色主题展示界面?by Arman Rokni

09. 一个预定应用

一个预定应用 by?Nastia Diadenchuk

10. 音乐播放器

音乐播放器 by martinmroc

11. 一级方程式深色主题设计

一级方程式深色主题设计 by?Damian Denis

12. 投资类应用设计

投资类应用设计 by?Prakhar Neel Sharma

13. iWatch 深色主题

iWatch 深色主题? by?Filip Legierski

14. 财务管理应用界面

财务管理应用界面?by HNJD@DE

15. 摄影 APP by Timotius Muliawan

摄影 APP by Timotius Muliawan

16.

Instagram的概念深色主题设计稿 by AurélienSalomon

17. 睡觉管理APP

睡觉管理APP设计 by??Filip Legierski

18. 深色风格的金融APP设计

深色风格的金融APP设计?by Sam

19. 深色主题风格的Admin后台管理系统?by boxer boxer

深色主题风格的Admin后台管理系统?by boxer boxer

20.

一个基金APP界面设计?by Dannniel

21. 深色主题的股票类的软件设计

深色主题的股票类的软件设计?by Alex Arutuynov

22. 漂亮的前端代码软件界面?by Vahan Hovhannisyan

漂亮的前端代码软件界面?by Vahan Hovhannisyan

23. 后台管理界面?by Alexandr Ivchenko

后台管理界面?by Alexandr Ivchenko

24. 带蓝调的深色风格后台管理界面??by Toto Castiglione

带蓝调的深色风格后台管理界面??by Toto Castiglione

25. 后台界面?by Alex Arutuynov

后台界面?by Alex Arutuynov

26. 项目管理工具? by?ALEXEY FMNH

项目管理工具? by?ALEXEY FMNH

27. 深色后台系统风格?by Sayem ahmed

深色后台系统风格?by Sayem ahmed

28.

使用深紫色调作为深色主题,这些有别于其它界面。加密钱包APP设计 by Adin Yanuar

29. 艺术类网页设计作品?

艺术类网页设计作品?by Mario ?imi?

30. 手表网页

黑色很好代表品质、高端,这个手表网页就是很好的例子,by Diego Velazquez

31. 自行车网页设计作品,使用偏蓝的深色调子

一个自行车网页设计作品,使用偏蓝的深色调子?by Fábio Santos

32.

界面看上去很扁平简约 界面看上去很扁平简约?by Heyvy

33.

一个监控类后台界面设计 一个监控类后台界面设计?by Tolik Nguyen

34.

当用户点击某个图片时,自动切换深色主题,突出产品质感,这也是一个不错的展示方式?by Samil Bastas

35. 财务管理APP界面

财务管理APP界面,这个色调国内很少见?by Alex Arutuynov

36. 服务器后台管理界面

服务器后台管理界面?by Kostia Varhatiuk

37. 在线直播界面设计

在线直播界面设计,用黑暗风格最适合不过了?by Surja Sen Das Raj

38. 汽车APP界面

汽车APP界面?by Daniel Tkachenko

39. 登录界面设计

见过这么多彩深色主题界面吗?登录界面设计 by Prakhar Neel Sharma

40. 别迦摩大学网站

别迦摩大学网站?by M. Sinan Ucler

41. 产品展示页面设计

产品展示页面设计?by Quan Ha

42.

对比强烈的深色风格,运动跟踪APP设计?by Simona Vorlova

总结

在2019-2020的设计趋势文章也提到,深色主题也是未来设计趋势之一,所以这些优秀的作品无论是布局排版还是配色都有一定的参考学习价值,建议收藏分享,感谢阅读。


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/dark-theme-ui-designs.html/feed 0
加强设计形式感的五个技巧 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/jianqiang-xingshi-gan-wuda-jiqiao.html //www.ksnb.net/jianqiang-xingshi-gan-wuda-jiqiao.html#respond Mon, 19 Aug 2019 02:54:04 +0000 //www.ksnb.net/?p=30968 加强设计形式感的五个技巧

很多时候客户说没有设计感,但客户又无法表达缺少什么设计感,那怎么办?这基本上是作品的形式感问题,什么是形式感?今天就和大家聊聊这个问题以及和分享加强设计形式感的五个技巧,这些技巧在海报版式设计、banner以及LOGO设计上都可以让你有所启发,下面大家一起学习。 加强设计形式感的五个技巧

形式的定义

百度对形式的定义是:指某物的样子和构造,区别于该物构成的材料,即为事物的外形。比如说一块木头是没有形式的,但把它做成椅子后,它就有了形式。 把该定义延伸到平面设计中来,形式就是设计的构图、造型、元素的组合方式。不过,如果按这种说法的话,任何设计都是有形式的,因为任何设计都经过了组合,所以我们常说的某某设计没有设计感,其实是说它的形式感太弱或者太普通。这么说你可能还是不明白,没关系,后面葱爷会举一些很直白的例子。

形式的意义

形式感强的设计有以下三大优点。

加强形式感的五个技巧

为了让大家更快了解如何加强设计的形式感,葱爷总结了五个常用的技巧。 1.符号化 首先,要根据设计需求和关键词,提取出一个符号,这个符号可以是图形也可以是数字或者文字,然后,以这个符号作为主体,围绕它来组合或变化设计元素。比如很多热点海报都属于品牌海报,所以我们经??吹胶芏嗥放朴肔ogo图形来作为创造形式的符号。 符号化

▲以logo图形作为符号

▲以与主题相关的图形作为符号

2.用图形整合 这个方法其实跟符号化差不多,区别在于符号不一定是图形,而且符号一定要有意义,而图形则不然,很多时候使用图形整合设计元素只是为了增加形式感和美感。比如下图,就是把元素整合在一个类似豆子的图形内,这个类似豆子的图形内就是它的形式。 用图形整合 图形的形状可以是多样的,除了几何图形外,人物的轮廓也经常被用于整合画面元素。 这一技巧在Logo设计和字体设计中也经常被用到,比如福字普通的写法就没什么形式感,而把他的轮廓设计成一个圆形时,形式感就增强了很多。 而下图的动物Logo图形也是被抽象地设计成了圆形,这么处理也比正常状态的动物图形有更强的形式感。 3.采用新的组合方式 比如在广告设计中图与文字的组合方式,一般是图为主文为辅,并且图文相互独立,这种组合方式很常规,形式感比较弱,除非图片部分本来就有很强的形式感。 所以我们可以尝试使用其他的组合方式,比如以文为主、图为辅: 把文字叠加在图片上: 把图片叠加在文字上: 把图片填充在文字里: 把图片与文字形成强烈的透视关系: 以上这些处理方式都可以得到相对更强的形式感。 4.把毫不相干的元素组合在一起 都说设计源于生活,所以大部分设计的表现手法与现实中的事物很接近,但是别忘了,设计还需要高于生活,所以我们可以打破现实情况的束缚,把现实中不可能在一起的元素或状态结合在一起。这一手法在以形式感见长的海报设计中很常见。 比如给三维的人物贴上图形或文字: 给旗帜加上金属材质: 把摄影图片与类似油漆效果的条形色块结合起来: 把波纹效果与文字结合起来: 5.风格混搭 为了使画面整体和谐,做设计时我们会很注重统一原则,比如风格统一、排版方式统一、字体调性统一,但是为了增强形式感,打破某些“统一”反而去强调对比效果也是可以的,比如风格混搭就是广告设计和海报设计常用的技巧。

▲三维风混搭手写扁平风、荧光色混搭黑白色

▲人物摄影混搭涂鸦色块

▲波普风混搭摄影图片

实例展示

下图为某市4G用户破200万的宣传海报,该海报采用了一种类似会议背景板的常规做法,形式感比较弱,下面我们要运用前文提到的符号法来提升它的形式感。 第一步,提取出关键词:200万,并将该文字设计成笔画简洁且比较粗的无衬线体,使其看起来具有现代建筑的感觉。 第二步,把文字“200万”作为视觉符号,将原稿中的建筑元素嵌入其中,建筑的排列要有前后关系和主次关系。 第三步,加入模特以增加画面的亲和力和动感,再加入一点装饰元素使得上下平衡,人物和装饰元素可以超出文字区域,不过不能影响到文字的识别性。 第四步,把各元素用渐变色统一起来,这里使用了既时尚又有科技属性的玫红到蓝色渐变。 第五步,加上文字信息,视觉主体放在画面左边,文字对齐排在右边。 对比调整前的效果,调整后的方案是不是形式感强了很多,当然视觉冲击力和美感也随之提升了。

▲调整前

▲调整后

总结

做设计就是在做形式,只不过形式并不是异想天开出现的,而是有主题和品牌的限制,并且由与主题或品牌相关的内容构成,一句话:设计要有形式感,但形式要为内容服务。学习了吗?记得运用到你的设计作品上哦。 作者:葱爷(ID:congyenanian)


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/jianqiang-xingshi-gan-wuda-jiqiao.html/feed 0
界面设计中有那些重要的设计“小元素”呢 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/sheji-xiao-yuansu.html //www.ksnb.net/sheji-xiao-yuansu.html#respond Sun, 18 Aug 2019 10:30:04 +0000 //www.ksnb.net/?p=30959 界面设计中有那些重要的设计“小元素”呢

通常刚在UI设计培训班出来的设计师经验不足,往往只能把界面做到“好看”而已,却忽略了界面设计中那些重要的设计细节,其实界面有很多设计“小元素”是非常重要而且实用,这里分享一些关于“小元素”的设计经验总结,希望能对UI设计师们有所帮助。 界面设计中有那些重要的设计“小元素”呢 设计中的“小元素”的这个说法还是有些太笼统,我又把它们分为大致三个部分: 一、视觉类设计元素 二、提示类设计元素 三、功能类设计元素

一、视觉类设计元素

虽然说是视觉类的设计,但还是要尽量避免加入过多无用元素,不能为了装饰而设计。要结合自身产品,满足视觉平衡,要达到情感化设计的目的。 ? 1.缺省页?? 通常状态是,当前页面没有内容或无网络状态下出现的页面。由于此页面没有内容,设计师发挥的空间就变得很大。根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。 缺省页界面设计

点融投资

我想应该没有人喜欢看到缺少内容的页面,这会给用户心理造成很大的落差。非常影响体验。因此,缺省页就变得格外重要。如果设计得当,非但不会影响体验,反而会让用户喜欢上它。 除了视觉方面的设计,缺省页也可以添加刷新按钮,在功能层面进行完善。 界面设计中有那些重要的设计小元素呢

饿了吗

?2.头像?? 现在,很多的产品已经放弃了死板的默认头像,给用户更多的选择。比如京东和小赢理财,就提供给用户多种头像选择。 头像设计

京东金融

头像设计

小赢理财

这种增加默认头像的做法虽然是锦上添花,但这种情感化的设计不仅在视觉上充满新意;同时,也让产品更加有趣。 ?3.辅助元素?? 移动端UI都是遵从相对应的规范来进行设计的,因此大部分产品都不太会在这种寸土寸金的地方放置一些硬核的纯装饰性元素。不过,设计师可以在卡片或是瓷片区域上加入自己的想法。 卡片/瓷片的布局多数是左字右图,而此类辅助元素并不仅仅是为了突出视觉上的设计。更主要的是保持卡片/瓷片的结构平衡,或是填充多于的留白。让整体页面在视觉上更加饱满吸睛。 辅助元素

乐刻运动?/ 众安保险

? 4.切换动效?? ①标签栏动效 通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。 标签栏动效

土豆视频

②导航栏动效 导航栏动效

虾米音乐

二、提示类设计元素

“提示类”顾名思义,对于我们有提示作用的或是有引导帮助作用的都可以归为此类。那么我最先想到的,应该就是让人又爱又恨的“小红点”了。 1.徽标?? 徽标通俗的叫法就是“小红点”,一般固定在图标或是标签等右上角的位置。它具有非常强的提示作用。强大到有时不想让它出现。 说起小红点就不得不提“红点强迫症”这个词。它是现代人的社交网络依赖症之一,表现为看到它就不自觉的或是强迫性的点击它,让它消失。 提示类设计元素

QQ一键清除“小红点”

导致人们看到“小红点”就像点开的原因,是因为它的突然出现,破坏了周围的布局,打破了排版平衡。使某一块内容变得异?!靶涯俊?。如果想让“小红点”在设计中不那么醒目,我们可以通过颜色来淡化它的存在。 界面设计中有那些重要的设计小元素呢

淘宝 / QQ邮箱

徽标的颜色多为红色。因为红色足够醒目且让用户能够警醒。常见的样式有“小红点”、“红点内嵌数字”、“红点内嵌字符”等样式。 界面设计中有那些重要的设计小元素呢 徽标的尺寸并没有一个严格的规范?!靶『斓恪痹谝恍┲髁鞑分?,尺寸从16px到30px不等。填充字符内容的徽标具体尺寸需视情况而定,最小字号为20px。 显示的数字最高到“99”。超过了则显示“99 ”或“...”。一些信息或是评论位置的徽标,显示可以达到四位数的千位甚至更高。 界面设计中有那些重要的设计小元素呢

今日头条

徽标可以出现在多个位置上。标签栏、导航栏、金刚区、文字标题、头像等等,均可以发现它的存在。 2. 标签 标签的出现几率也非常高。常出现在电商、金融、生活娱乐类等产品中。它的主要作用是进行分类或突出重点。比如界面中需要我们区分开商品的属性;或是对重点商品、新品进行着重提示等,都需要用到标签。 标签的样式非常丰富。底色、边框、图标组合;矩形、圆角矩形、异形、标题样式等等。同时,标签可以出现在任何地方。首页、我的页面、商品详情页、搜索页、客服咨询页等等。我们打开淘宝、美团等APP,就可以发现多种样式的标签。 标签

美团 /?淘宝 / 飞猪

颜色方面,还是要以主色和中性色为主。加重提示可选用红色;突出活力和时尚感可用渐变色。所以这就需要我们根据具体需求和产品属性来搭配。但使用颜色不可过多,同时还要保持页面整体配色的平衡。 ?3. 图标? 这里我会提到四种主要图标类型:①“首页”或“我的页面”标题前的提示性icon;②新闻或公示??樽蟛嗟谋晏馔急?;③页面加载图标;④动态提示icon。 ①目前,越来越的主流产品已经放弃了标题前加图标这样的设计形式了。取而代之的是简单粗暴的将标题加粗加大。 在“我的页面”中还是有很多产品保留了标题前添加提示性icon的设计形式。 图标

京东金融 / 支付宝 / 饿了么

而之前出现过的在标题前加竖杠的设计形式在APP端已经基本见不到了。在网页端还是会时常碰到。个人认为竖杠的设计不仅过时,而且没有什么实际意义。有点为了装饰而设计的感觉。在手机端页面这种寸土寸金的地方,这种意义不大的装饰直接去掉反而会更好。 界面设计中有那些重要的设计小元素呢

腾讯电脑管家 / 360

这可能也是为什么越来越多的产品不再标题前加icon的原因吧。毕竟,足够醒目的标题就已经很好的起到提示作用。大标题这种设计形式也是iOS11重点升级点之一。 当然,像一些动漫类或是娱乐类、直播类的产品,增加icon反而会让页面更有活力,更有趣味性?;故且菥咛宀范?。 界面设计中有那些重要的设计小元素呢

斗鱼 / 腾讯动漫

②新闻/公示???,在电商、招聘、生活类等产品中经常出现。为了更好的让用户注意到,通常的做法是将左侧标题进行重新设计。同时,此类标题图标可以融入产品的品牌基因元素,更好的突出产品特点。 界面设计中有那些重要的设计小元素呢

拉勾招聘

③加载图标是当网络速度受限,或页面内容加载过多等因素出现时的提示性icon。多以小菊花图标为主。 界面设计中有那些重要的设计小元素呢

微信

动效设计在目前越来越受到人们的重视。这种流畅的表现形式和出色的视觉吸引力受到了很多人们的追捧。我们会发现很多的产品由开始的死板单调,变得活泼丰富起来。这里面动效设计功不可没。 界面设计中有那些重要的设计小元素呢

饿了么

界面设计中有那些重要的设计小元素呢

马蜂窝

? 4.气泡弹窗?? 气泡出现的场景大致有两种:一种是新用户第一次登录或是更新完毕时。主要起到引导和教学的作用。 界面设计中有那些重要的设计小元素呢

陌陌

第二种是新功能、新产品或新话题推出时,主要作用是提醒和宣传。 界面设计中有那些重要的设计小元素呢

知乎

气泡的样式并不丰富,多数还是常规的矩形或圆角矩形。配色多是以主色或其他辅助色为主。不过,通过动效的融入,可以使气泡变得更加吸睛,产生不错的吸引力。 除此之外还有一种气泡弹窗是Toast,也就是吐司弹窗。它开始出现在安卓规范当中,是提示弹窗的一种。初始形态是在页面底部显示的黑色提示窗。经过演变,即使是在iOS的产品中也出现了类似的设计。形式目前演变成了下拉刷新从上弹出提示,并且有可关闭的样式。 界面设计中有那些重要的设计小元素呢

豆瓣

? 5.页面指示器?? 页面指示器就是在banner下方排布的小圆点?;崴孀?a href="//www.ksnb.net/tag/banner" target="_blank" class="blank-link" rel="noopener noreferrer">banner进行同步轮播。轮播到当前页面时,对应的小圆点会有特殊显示。 页面指示器

拉勾招聘

页面指示器的形式不只局限于小圆点。其他的形式包括矩形、异形、数字、延展图形等等。 界面设计中有那些重要的设计小元素呢

网易考拉

同时,页面指示器还可以和进度条相结合?;崛糜没Ц忧宄植ヒ徽磐妓牡氖奔?。 界面设计中有那些重要的设计小元素呢

爱彼迎

理想状态下,最多轮播四到五张banner图。也就是说页面指示器的小圆点也最多显示四到五个。电商类的产品轮播图会更多一些。 6.导航栏?? 安卓导航栏最原本属于安卓规范当中。目前,很多iOS产品当中也开始使用这种导航栏样式来进行设计。而原本属于iOS规范当中的分段选择器变得不那么常见了。 这种导航栏的优点是除了点击外,还可以左右滑动进行切换。而且并没有对导航栏中的选项有过多的数量限制。 导航栏常见的样式包括文字加线条、底色或品牌图形等,样式丰富。 音量条

荔枝FM / AcFun / 众安保险 / 飞猪 / 他趣

7.音量条 目前很多产品都将原本弹窗形式的音量显示,改为固定在顶部的条状形式。目的是为了不影响用户的使用体验。能够更沉浸的使用产品。 音量条

Instagram

8.按钮 这里的按钮以uber为例。在登录时,输入完成手机号下一步的时候,按钮会变成等待状态。按钮与等待演示动效相结合,用流畅的动画消除了用户等待时产生的负面情绪,让整体简洁的页面变得充满活力。 因此,我们在设计按钮的时候,结合场景,可以添加创意。让死板的按钮变得有趣起来。 按钮

Uber

9.提示性文字 我们??梢钥吹皆诓分械摹拔业摹币趁嬷?,标题右侧会有一行文字提示。有些是单纯的提示性文字,而有些则会显示重要的数据,方便用户在不点开二级页面的情况下进行查看。不仅如此,设计师还可以对这类字体进行设计,或是添加图标来丰富它的设计样式。 提示性文字

荔枝FM

三、功能类设计元素

1.标签栏 作为一个基础控件,位于底部区域的标签栏已经演化出多种丰富的样式。 ①刷新/返回顶部 瀑布流类的首页形式,为了方便用户更新内容。在刷到一定位置后原本的首页按钮都会变为刷新状态。一些产品也将返回顶部一起做到了页面中。例如马蜂窝,就将返回顶部按钮放到了顶部右上角的位置。刷新、返回两不误。 淘宝刷新/返回顶部设计

淘宝

马蜂窝返回顶部设计

马蜂窝

②添加按钮 除此之外,一些具有添加或是上传功能的按钮常常被固定在标签栏中间位置??梢匀糜没У谝皇奔浞⒕?。 小红书添加按钮

小红书

穷游添加按钮

穷游

这些巧妙的设计不占用过多空间,又能很好的解决用户遇到的问题,非常方便。 2.悬浮按钮 悬浮按钮最开始属于安卓规范当中,之后在iOS产品中也被保留了下来。虽然在官方规范中并没有此类按钮,但因为他使用起来非常方便,并且国内很多软件安卓端和iOS端都是使用一套页面。因此,包括悬浮按钮等一些共性设计就都被保留了下来,在两个平台均可得到使用。 悬浮按钮

马蜂窝

荔枝fm

荔枝fm

马蜂窝

马蜂窝

悬浮按钮不仅仅可以完成点击等常规操作,还可以作为收藏容器将更多地功能结合在一起。而且位于屏幕右下角,方便用户使用。 3.顶部扩展内容 扩展区域是我个人对它的命名,这部分区域在页面的顶部。因为空间足够大,所以许多产品可以添加更多的设计想法在里面。比如添加日期或者天气等。像一些特定的产品会在顶部的区域放置一些特有的功能。比如蚂蚁金服的智能助手等。 顶部扩展内容

蚂蚁财富

界面设计中有那些重要的设计小元素呢

UC浏览器

界面设计中有那些重要的设计小元素呢

看理想

4.功能性按钮 此类按钮也是非常多见的。比如,导航栏右侧或标题栏右侧的更多按钮。它的形式多以三点为主,也有文字、阵列点灯样式。 三道杠icon多是抽屉导航代表图形;箭头基本都是下一页或返回的固定图标形式。以上图标均被广泛使用,已经成为了用户的一种固有认识。 因此,我们在设计时可以在此基础上进行升级或创意性优化。切不可过分颠覆他们,不然会增加用户的学习成本。 功能性按钮 5.下拉/上划 ①下拉刷新功能已经成为了一种默认操作。根据产品的属性定位,我们会见到各种不同风格或是设计元素的下拉动效。设计师可以根据品牌延展元素,融入更多的想法,让页面变得更有趣。 下拉/上划

土豆视频

②拿点融投资来举例,上划到页面底部会出现宝箱图案。随着我们上划的幅度,宝箱会打开出现宝物和品牌形象。上划到底则直接跳转到另一页面。这种设计让我对页面底部的空间有了更多的想法。 界面设计中有那些重要的设计小元素呢

点融投资

6.视频进度条 视频进度条放置在视频底部,是视频类产品不可或缺的重要控件。当视频播放时会自动隐藏。除此之外,进度条位置上还可以集成其他功能。比如全屏、点赞、收藏、弹幕开关等。 哔哩哔哩的视频进度条:当拖拽控制按钮时,小电视icon会随着我们拖拽的方向而改变。虽然看似是很不起眼的设计,但在视频区域也可以左右滑动调整进度时,进度条的小icon就能很好的展示出来,充分体现其趣味性。 视频进度条

哔哩哔哩

总结

以上,就是对手机移动端上关于“小元素”的总结。在整理期间还发现了其它有意思的设计,只不过它们并不属于“小”的这个属性,因此没有放进文章中。在体验产品的过程里,一些有趣的不错的设计想法,会对大家之后的作品、工作项目带来很大的启发。希望能够有更多的朋友可以开始整理并分享出来。


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/sheji-xiao-yuansu.html/feed 0
霓虹灯效果制作教程,含字体素材 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/nihongdeng-xiaoguo-zhizuo-jiaocheng.html //www.ksnb.net/nihongdeng-xiaoguo-zhizuo-jiaocheng.html#respond Sat, 17 Aug 2019 06:09:56 +0000 //www.ksnb.net/?p=30957 霓虹灯效果制作教程

今天设计达人制作了一组发光字,教程主要是给大家一个思路是如何创造这些霓虹字体,在没有素材的时候也可以自己设计。教程我们运用了Photoshop的多个图层样式来实现这些效果,简单入门,新人也能学会。同时我们也提供了提供了源文件分层素材,不想自己做的同学可以直接拿来使用提高效率。 霓虹灯效果制作教程

霓虹字制作教程

1. 第一层高光文字 首先给画面添加个黑色背景以便我们查看效果,然后开始做最上层的文字,可使用【APP设计必备字体:San Francisco Pro、苹方、思源黑体和Roboto等】提供细字体字型来制作,当然也可以其它字体。 我这里的字号使用36像素。 高光文字 图层样式:外描边,大小为3像素,不透明度40%左右。 文字图层参数

文字图层参数

因为背景也是黑色的关系,所以暂时把背景改为白色来看效果,看看描边的粗细是否合适,如果不合适就适当改下大小。 如下面第二行文字,因为字小,所以改为2px描边就够了,大家不要死记参数,灵活运用。 文字描边

文字描边

2. 第二层文字:外发光与描边 第二层文字有颜色的发光字,颜色使用#33e5ff,其它参考如下图: 外发光与描边

外发光图层参数

描边图层参数

描边图层参数

效果如下: 外发光 描边效果

外发光 描边效果

3. 发光组制作 把这2组文字编组,并组组添加图层样式为外发光,颜色值#33e5ff。 发光组制作

图层编组

图层组的参数_广东快乐十分下载软件 www.ksnb.net

图层组的参数

最终效果

利用这些图层样式,我们可以复制出更多的图形并更改其它颜色,就能DIY出自己想要的效果啦。 最终效果 做霓虹灯效果字体是不是很简单?但是如果我们有素材,就能更快的做出这种效果出来。
以为这么就完了吗? NO,NO,NO……

福利:霓虹灯字体素材

霓虹灯字体 这里小编还为大家精选一套包含A-Z的26个字母、0-9的数字霓虹灯字体,PSD分层格式适合大家直接使用。有了这个素材,字母数字都不用改,一个一个拼就可以了,是不是更方便? 下载地址:https://pan.baidu.com/s/1B6xhVKayCq6TDdxEV2dQbg 提取码:在【设计达人】公众号回复数字【8534】自动获得提取码啦~ 今天教程就分享到这里,这是一个非常简单实用的教程,建议收藏此文章,以后做霓虹灯的时候就可以翻来看一看。 ?


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/nihongdeng-xiaoguo-zhizuo-jiaocheng.html/feed 0
Figma的使用技巧与插件推荐 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/figma-jiqiao-he-chajia.html //www.ksnb.net/figma-jiqiao-he-chajia.html#respond Fri, 16 Aug 2019 00:00:24 +0000 //www.ksnb.net/?p=30955 Figma的使用技巧与插件推荐

使用Figma是一个月左右,这个文章收录的插件都是我作为一个枚设计师,确实觉得有点用的。这些技巧都是我学习 Figma 后总结的经验,均为原创。 最吸引我的地方是跨平台、免费,最让我诛心的地方是网速不稳定。这段时间可以看见 Sketch 和 Figma 相互借鉴(chaoxi)。Figma 上周公布的插件使其离 Iron Throne 更近了一步。 Figma的使用技巧与插件推荐 7个Figma插件:

1. Content Reel - Figma 内容填充插件

Content Reel 可快速将文本,头像和图标拖入你的设计中。 Content Reel - Figma 内容填充插件

2. Figmotion - Figma 动效义肢

Figmotion - Figma 动效义肢 在过去,制作动效原型的工作流需要两个及以上的的工具协作:绘制原型,导入 Principle / Flinto / AE 中制作动效,最后编写动效设计说明或是使用 bodymovin 交付。?在 Figma 平台里,Figmotion 插件可以完成一站式的动效设计,输出格式包括:Figma 内部预览、渲染为 gif/mp4/webM 格式、导出 CSS/JSON 代码格式。目前开发版本为0.1.14,不支持编组。

3. Unsplash - 摄影作品填充插件

将 Unspash 中美丽的摄影作品插入你的设计稿中。你可以插入随机照片或者搜索特定的内容。Unsplash 拥有摄影作品作者的许可,你可以免费在个人或商业项目中使用。 Unsplash - 摄影作品填充插件

4. Mapsicle - 地图制作插件

如果你的作品要用到地图,请不要再去百度/谷歌地图截屏了。使用 Mapsicle,你可以快速顺畅的在演示稿中放置地图。友好的用户界面让你可以轻松制作出完美的地图。 Mapsicle - 地图制作插件

5. Image Palette - 图像取色插件

色搭是设计中的一个重要命题,如果发现一张照片的配色和自己项目格调相似。那么从照片里直接取出关键色,可能会是一个取巧的色搭方法。Image Palette 可以帮助设计师从图像中提取五个关键色,形成一个迷你色盘。 Image Palette - 图像取色插件

6. Iconify - 图标库插件

还愁找不到合适的图标么?还在为精品图表库付费么?Iconify 提供海量免费精致图标,直接导入 Figma 使用。Iconify 的用户界面非常友好,所有功能所见即所得。支持直接搜索,并可以对图标进行翻转、角度和颜色的定制。 Iconify - 图标库插件

7. Autoflow - 流程绘制插件

Autoflow 简化了在 Figma 中绘制流程线的过程。选择两个设计元素,按下快捷键,元素之间便会生成简约美观的连接线。 Autoflow - 流程绘制插件 8个Figma技巧: 8个Figma技巧

1. 用 Arc 功能为椭圆图层易形

Figma 虽然界面简单,看上去很简洁。但在实际使用的时不时出现一些让人眼前一亮的小功能。这些功能只会在你绘制图形的时候出现,不会聚在工具栏、检视窗等界面上。比如说 Smart Selection。今天介绍的功能 Arc 就只能在椭圆图层上使用。 用 Arc 功能为椭圆图层易形

2. 用 Constraints 功能制作自适应导航栏

Constraints 功能让用户可以通过对图层 x 轴、y 轴布局方式的调整,实现图层按照一定的策略进行缩放,保障不同图层在页面不同位置的布局方式。Constraints 告诉 Figma 设计稿中的元素在用户拉伸他们的框架时应该如何响应,这让你轻松掌控设计稿在不同的屏幕尺寸以及设备上的效果。你可以为框架里的任何元素应用 Constraints。 用 Constraints 功能制作自适应导航栏

3. 用 Component 功能制作可改分评分控件

Components 是指那些在整个项目中会被反复使用到的 UI 元素,可以是按钮、图标、模态或者形形色色的图层组合。通过对这些 Components 的复用可以保持整个设计稿的一致性。Components 算一个可玩性比较高的 Figma 功能,了解下面四条规则可以帮我们快速上手: 1、母版 Component 中所包含的图层定义了这个 Component 的所有属性; 2、实例是你可以在设计稿中复用的 Component; 3、你对母版做出的任何改变都会立刻应用在实例上; 4、实例中的一些属性可以复写,这些变化不会影响母版。 用 Component 功能制作可改分评分控件

4. 使用 Smart Selection 玩转图层网格

Smart Selection,用于高效操作设计稿中的图层网格。Sketch 在 55 版本中也偷偷放上了半个这个功能,离 Smart Selection 还是有一些差距,不过我猜很多同学并没有发现这个小秘密。 使用 Smart Selection 玩转图层网格

5. 在 Figma 中调用本地字体

Figma 在云端,而设计师自己私藏的花里胡哨的字体库在本地。那么让我们来解决这个小小小问题。 在 Figma 中调用本地字体

6. 用图层插入功能划分页面布局

在 Figma 的设计工作台中,工具栏里有很多图层插入功能,这些功能既基础又核心。让我们掌声请出今天的主角 - 微信小程序「豆瓣评分」,一起通过对其首页的布局划分,来上手这些图层插入功能。

7. 创建你的第一个 Figma 设计稿

最近在知乎看到不少关于 Figma 的安利贴,又重新勾起了我的好奇心。干脆这次系统的学习一遍,顺便记录学习过程,产出一套接地气,手把手的教程。需要注意的是,由于 Figma 是墙外好物,你的使用水平下限取决于网速和英文水平,一定要心平气和。 创建你的第一个 Figma 设计稿

8. 熟悉 Figma 的设计工作台

正式画稿之前我们需要熟悉一下 Figma 的设计工作台。万幸的是,以 Sketch 为代表的新 UI 设计工具,工作台的布局都差不多。我们以总分的形式拆解 Figma 的设计工作台。先来一张动图遍历一下工作台的大多数功能。 熟悉 Figma 的设计工作台 ?喜欢这些Figma技巧和插件吗?无论是WIN用户还是 MAC Sketch 用户都可以随时入坑哦。


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/figma-jiqiao-he-chajia.html/feed 0
利用“竞品分析”解决自身产品所存在的问题 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/liyong-jing-pin-fenxi-jiejue-wenti.html //www.ksnb.net/liyong-jing-pin-fenxi-jiejue-wenti.html#respond Thu, 15 Aug 2019 00:00:26 +0000 //www.ksnb.net/?p=30953 利用竞品分析解决问题

竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品,能够让设计师快速了解自家产品所处的位置,从而来针对性的改进自身产品的一个方法。简而言之,就是要站在巨人的肩膀上去思考,以竞品分析的形式去学习其他优秀的产品,从而解决自身产品所存在的问题。 利用竞品分析解决问题

1.为什么要去做竞品分析

做一件事情之前一定要思考做这件事的价值和意义,只有你明白其重要和必要性,你才会知道该怎样去做这件事情,而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容,这样虽然产出了很多,但是关键性的内容点其实还是不清楚。 说直白点,你需要通过这篇竞品分析去解决你工作或者创作中遇到的什么问题,带着疑惑和目的去分析在我看来是更有效率的。因此特分为以下几种情况: 为什么要去做竞品分析 因此我们要学会根据自己的不同需求,去制定不同的竞品分析方案,让分析的内容更聚焦。作为UI设计师来讲,通过竞品分析为自己的设计方案提供科学的理论依据,为自己赢得话语权,能够更好地科学产出内容。

2. 如何寻找竞品

竞品的选择非常重要,如果找到错误的竞品,那么你所分析的一切结论可能都引向了一个错误的方向。从而让自己的努力都白费。那么怎样才能找到合适的竞品呢?分为以下三类情况 A.核心服务与目标用户相同的产品(直接竞品): 这一点是广大设计师都能想到的范畴,也称为直接竞品。即提供的核心服务、市场目标方向、客户群体等与我们的产品基本一致,产品功能和用户需求相似度极高的产品 。往往是通过业务关键词就能直接搜索到的竞品,比如音乐类产品,那么直接在应用商店,或者通过专业网站(易观千帆等)搜索关键词“音乐”即可搜索出排行前列的竞品。 B.目标人群不同,但功能??楹头窠咏牟罚浣泳浩罚?/b> 这类竞品可以找起来并不那么直接,可以通过对应功能去逆推拥有此功能的产品,并进行相关搜索。 如果想不到,可以通过“人人都是产品经理” “36氪“等关于产品资讯的网站进行查询,甚至可以通过百度指数来进行发散思维,看一下跟你关键功能相接近的都有哪些。比如你研究外卖产品,除去饿了么和美团等直接竞品,你还可以在分析用户下单和购买流程中,去分析淘宝和京东等购物产品,也能得到一定的帮助。 如何寻找竞品 C.目标人群和服务都不同,但交互或者视觉有可以参考的产品(关联竞品): 这里所选择的产品,定位和领域可以都完全不同,但是你要从这款产品中得到启发,从而让你的产品能够拥有其他竞品不同的特点或者功能???。有一个很典型也熟知的的案例,就是卫龙辣条的设计案例,在卫龙推出之前,可以说是没人会想到辣条会和高端扯上关系,但是卫龙就是借鉴与其领域完全不同的苹果设计去做,从而在包装上独树一帜,从而吸引人们注意取得成功。因此通过不同领域跨行业的产品有时候也可以找到不错的思维方向。

3.如何进行商业分析

进行商业分析,这里只提及到三个基本选项:商业背景、产品盈利模式以及用户人群。通过这三个基本要素,你能对所研究的竞品有一个大概的了解。当然深入了解还需要其他平台(官网网站、36Kr等)来查阅更多的相关性资料,下列是对QQ音乐商业背景的简要分析。 如何进行商业分析

4. 如何进行交互分析

我们在做交互分析时,我们需要进行必要的两点分析:用户路径和交互维度。 用户路径:指用户从某个开始行为事件直到结束事件的行为路径,即用户在使用某个功能的完整流程称之为用户路径。我们需要去观察和体验在这一个完整路径中涉及到的页面、动效、视觉到底是怎样的。就拿登录页来说,我们看看排行前列的竞品是怎么做的。通过相应的体验和对比分析,我们就可以找出这其中符合我们产品性质的最优解,从而提高我们的登录注册效率。 交互维度分析 交互维度:交互维度和用户路径有所区别。这一层需要弄清楚产品的核心路径,从而能够更好的解析产品各个层面的逻辑关系,这就需要我们以用户的角度去逐个体验,整体联系,随后记录下来。使用过程中我们也要去观察APP中的交互小细节,怎样分享的,怎样展示的,比如音乐软件进行截屏后和点击喜欢按钮后的反馈是怎样的。

5. 如何进行视觉设计

在进行视觉分析时,有一点需要注意,如果你需要详细分析某一???,请用手机尺寸截图后拿到设计软件中进行测量,不要光靠眼睛观察,很多时候的小细节我们只有在手动测量后才能感受到,比如控件的尺寸大小,间距的大小,以及颜色的取值,都需要精准测量后才能得出靠谱的结论。 怎样进行视觉分析呢,我比较推荐从一个app 视觉语言最基本的五个维度去分析,即“形色字构质” 如何进行视觉设计 最近以音乐APP进行了一次竞品分析,以QQ音乐APP来举例进行分析(当然竞品分析并不能只分析一个,而应该根据你需要的功能找多个竞品进行对比分析,才能看到更多的维度,这里只拿一个举例): 5.1 图形元素的分析 首先我们以形进行分析,形即图形元素,具体来讲即LOGO和图标。LOGO的更新在2018年10月以后已完成更新。新版的主要图标整理归纳如下: 图形元素的分析 可以看到整体的图标色调更加清新,造型设计更加圆润,未选中状态的线形图标则采用4px的描边,粗线形描边让整体界面风格显得更加稳重的同时对用户的干扰也较小。新版的图标界面让界面保持稳重的同时又富有活力。 5.2 色彩体系的分析 其次则是对色这一类别进行分析,颜色其实是对于品牌调性有很大的影响,比如一想起QQ音乐就知道主色是绿,一想起网易云音乐就知道主色是红,对用户的记忆点更深刻。通过截屏测量进行分析,得出整体的颜色如下(由于手机屏幕的色差原因,不可避免会有些许误差) 从局部来看,分析颜色最重要的一点就是能够弄清楚一个页面中哪些元素用的是同一种颜色,观察成熟的产品是怎样用颜色(和字重)去区分层级关系的。 色彩体系的分析 可以看到,用主色和三种辅色即可区分界面的整个层级关系,由此思考我们在制作自己的界面时也避免用太多的颜色,造成界面太过花哨。(颜色的具体色值可能有些许误差,更重要的是看颜色层级关系) 5.3 字体体系的分析 接下来是字的分析,字即字体体系,可具体到字体和字号。设计中字体一般来讲是苹方,字号则根据设计师的定义来进行相应的规范。通过页面的测量分析,可以拿到其具体的字号大小层级分析。(以下定义基于750的设计尺寸) 字体体系的分析 对于单个界面的分析,个人觉得要带有思考的眼光去看待,比如在首页中字号其实分配过多,像“更多”这种按钮就不应该再分一个字号,字号太多整体就显得有一点点乱了。虽然大厂的设计能在一定程度上给予我们参考,但并不是说他的每一个设计都是正确的,我们要学会用审视的眼光去看待出现在身边的设计。 5.4 界面构成分析 界面构成即界面的元素大小以及他们的布局,例如有时候我们不知道一个标准的搜索框的长宽具体多少才是合适的,这就需要我们去分析其他成熟的商业产品,通过测量来知道具体的数值,从而督促自己进行正确的设计。这里选取了一个默认的首页进行分析。 界面构成分析 将一个页面用右边的形式进行原型化,去掉干扰可以把结构看得更清楚。间距之类的也可以通过软件进行测量??梢钥吹絈Q9.0版本的去线化设计,利用大间距来区分各个???,去掉了其他的干扰元素,整体的界面??榭雌鹄捶浅U嗲嵊约案挥泻粑?。统一的圆角化设计也让整体设计符合流行趋势,显得更活泼。 5.5 质感与风格分析 关于界面的质感则是不同于扁平化的一个设计,即有的页面在你看来细节会更丰富,层级会更深。界面质感通过渐变,叠加,透明度等不同方式来呈现,比如在QQ音乐中的会员界面卡片,则体现了微质感: 质感与风格分析 上方的会员卡片就加入了渐变和图案叠加的方式来为卡片增加质感,让整个界面显得更精致。当然,叠加的图案都是与内容相关的,不能为了叠加而叠加。包括下方的权益图标,也采用了渐变的方式来让整个图标显得更精致和有质感。我们再处理质感的时候也可以用这种方式来进行。 以上通过“形色字构质”来分析是属于单个分析,相当于去拆解一个成熟产品中的每一个细节点,从而去学习和吸收。我们还要学会进行对比分析。把单独某一个功能??榱喑隼?,通过不同类型的对比从而归纳出这一类的设计方法和样式,进而总结相应规律。 比如某一天你需要设计一个歌单列表,你此时就需要分析所有TOP排行的歌单列表,看看分别都有什么,从而总结归纳出结构来,再进行分类。 通过分析提炼,形成以下结论并进行相应的概念风格展示设计: 这样,我们最后制作出来的方案才能涵盖比较全的解决方案,从而能够更好的助力设计产出。上图的产出可能稍显简陋,但只是做一个简单的示例,真正的产出应该更加有细节和落地,也要结合自己的工作需求做相应调整。

6.关注竞品的版本迭代和用户评价

关注版本更迭,阅读竞品版本更新的详细说明,你可以从中得出最新版解决了什么问题,提升了哪些体验,添加了哪些功能,融合了什么流行的设计趋势。产品迭代就是团队通过用户需求对某个产品不断完善的一个过程。迭代对于一个产品来说是至关重要的,一个产品如果不想被对手超越,就必须不断的对版本进行更新迭代。 除了关注具体的内容,你还可以观察版本更新的提示信息,例如夸克浏览器在每次更新时总会用富有趣味的文案来打动你,从而让你更加情愿去更新,提升新版的使用率。 用户评价则更不用说,产品的最终服务对象就是用户,用户评价的重要性自然不言而言。不过我们要客观辩证地去看待用户的评价,吸收好的建议,屏蔽无脑的意见,从而能够正确地迭代版本。用户评价的查看可以使用App Store或者用户评价网站(https://appbot.co/)去查询。

总结

以上的篇幅较长,看下来可能会有一些累,那么此篇文章提及到的点在这里回顾一次:
  1. 竞品分析的定义-站在巨人的肩膀上去学习;
  2. 为什么做-基于自己的目的去进行对应的竞品分析,分析的最终目的是解决自己在设计过程中遇到的问题;
  3. 竞品分析分为三个层面:视觉分析、交互分析以及商业分析;
  4. 怎样进行商业分析(商业背景、盈利模式、用户人群);
  5. 怎样进行交互分析 (用户路径、核心路径、交互细节);
  6. 怎样进行视觉分析 (从“形色字构质”五个维度去分析以及如何对比分析应用);
  7. 竞品的迭代和用户评价的重要性。
看完每一篇文章,告诉自己一定要在脑海里回顾一遍,思考一下这一篇文章到底有什么观点是自己之前没有想到的,哪怕只有一点是没触及到的知识盲区,那么这篇文章就是对自己就是有意义的。所以希望大家看完能有些许收获那便是最好的了。 By the way,如果你喜欢这篇文章的话,欢迎点赞、转发,谢谢大家!


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
//www.ksnb.net/liyong-jing-pin-fenxi-jiejue-wenti.html/feed 0
什么是UX设计流程?我们为什么需要它 - Co. Ltd.广东快乐十分下载软件 //www.ksnb.net/what-is-ux-process.html //www.ksnb.net/what-is-ux-process.html#respond Wed, 14 Aug 2019 00:00:29 +0000 //www.ksnb.net/?p=30951 什么是UX设计流程

作为一名UX设计师或者实习生,入职新工作的前一两周一般都是轻松无压力的。这段适应期甚至只会给你一个需求任务,你只用画画图,写写文档就能应付。 如果入职后做的项目时间排期很充裕,开发可能就会在你做好设计稿后才开工。倘若项目有多个产品,设计师又只有你一个,压力就会陡增,每个人都在等你的设计,这太浪费了! 所以,有一个完整良好的UX流程很关键,人力浪费只是其中的一个原因。 在正文开始之前,不得不说当年初入行时让人满头雾水的问题。为什么不同设计师写的UX流程不一样?一个可执行的UX流程到底是什么样的?我看了很多UX流程的文章,却还是不知道从何入手。 其实就像不下水,永远学不会游泳;不做UX设计,也永远无法掌握UX流程一样,实践才能见真章。 下面就用理论和实践经验来阐明UX流程的精髓。

什么是UX设计流程?

什么是UX设计流程

图像来源:uxdesign

UX流程可以定义为一种帮助设计师对设计进行迭代和打磨的设计方法。 一套好的设计流程一定需要有用户反馈。在流程中的每一步,都要尽可能的去收集用户反馈,然后将之纳入你的产品迭代设计中。 因此我们可以将它重新定义
UX流程是一种基于用户反馈而不断改进和打磨设计的迭代方法。
此外,设计师,团队甚至项目的不同,都会导致UX流程的差异性。 影响UX流程的因素:
  • 项目
  • 客户
  • 预算
  • 排期
  • 设计师的经验

为什么需要UX流程?

在深入探索UX流程不同层级的特点以及对产品的影响前,了解为什么需要用户体验过程将帮助您更好地理解其重要性。 1.明确技术流程,耗时,优缺点 根据上述提到的5个UX流程影响因素合理的选用不同的技术流程,并决定何时及如何使用这些不同的技术方案。因为对于一个项目来说,不是技术决定成败,而是要合适才行??梢圆榭凑飧鲎芙岬纳杓乒ぞ吡唇樱╤ttps://uxmastery.com/resources/techniques/)并进行选择。 2.让同事了解你的设计进展 身为设计师的你,要不就是在画设计图,要不就是在想怎么设计。而真正做项目大多都是团队协作,需要同事们互相沟通。所以当你使用一套UX流程,如果是有一个众所周知的大概流程,就能省去很多沟通的烦恼,让所有同事了解你的设计进展。 3.表现你的设计能力 UX流程除了对特定的项目有效外,还可以成为你作品集中展示设计水平的案例,来打动你的客户和面试官。如果流程来源于曾经待过的小组,那也足以证明前团队的专业水准。 4.帮助评估设计工作量 借助UX流程,可以把握产品的不同阶段该使用什么样的技术或工具,和各个阶段使用这些方案时所花费的时间。同时也能依据之前的经验,估算工作时长,准确排期。自由职业者还可以凭此决定接单价格。

UX流程的关键要素

首先,我想区分2个概念。现在要介绍的是UX流程的关键要素,而不是之后会重点说明的UX设计阶段,希望不要弄混淆。UX流程的设计阶段通常根据项目,排期和设计师的优势来决定,同时会包含多个UX流程的要素。 1.策略 战略指的是一些原则性的准则,比如品牌表达,组织的长期目标,项目指导原则,项目目标,项目成功的评估标准,目标优先级。 UX流程的关键要素 2.研究 另称“发现”。这是不同项目间差异最大的设计要素,因为是根据项目所采用的UX策略(精益UX和敏捷UX)来具体选择。 UX研究 有点不可思议的是研究要素最容易被设计师忽略。但是只有做过研究后,才能充分了解用户并创造用户知情体验,而从此开始,才算进入真正的UX流程。竞品研究和用户研究就是UX流程中使用研究要素的两个绝佳例子。 3.分析 通过分析,设计师可以透过现象看本质。 “现象”-在研究过程中收集的数据反映的一系列情况 “本质”-设计师验证对终端用户本质需求的假设 为了理解本质由现象得出,我们需要收集,清洗和挖掘得到的数据,分析本质并验证。

图像来源:www.pinterest.com

每位设计师都听过乔布斯的名言,使用分析要素就是想实现这一点。用户可能很直接的告诉你想要什么,但是经过分析,你会在调查研究过程中发现他真正需要的可能是别的。作为UX设计师,可以进一步和终端用户沟通,验证我们的假设,然后对现有产品做功能改进,增加新功能或者提高易用性。 4.设计 设计包含协作与迭代。 协作-所有相关人员的参与和想法。相关人员可以是客户,团队的开发人员或者其他利益相关者。 迭代-重复不断的验证想法和假设。 设计可以把产品思路具象化在用户面前,从而得到反馈并改进设计。改进设计并重复这个过程,直到客户和设计师都认可。 为了聚焦用户在体验设计解决方案上的注意力,只需要低保真原型,比如纸质原型,线框交互图和部分功能原型图,不需要涉及任何图形设计,品牌和视觉细节。 5.交付物 交付物一般是完整的高保真原型,也就是设计要素中没有体现的部分。通常使用在线原型展示,增加图形设计,品牌设计和视觉细节。 此外,这也是我们与最终用户,用户测试以及开发人员写作验证高保真设计的地方。 这听起来好像瀑布流的形式,但其中我们遵从的原则是敏捷。 遵循不同设计阶段各自展开,互不渗透而设计出的产品并不会让你和用户满意-Jesse James Garrett “用户体验要素” 上图是一个常见的错误模型,我猜和你看完UX流程要素后在头脑里建立的模型一样。 让我们看看正确的示例,正确的模型是自由的交替重复使用五要素。 最佳方案是不同设计阶段各自展开,相互渗透,共同结束-Jesse James Garrett “用户体验要素” 因此,下一个层级的UX设计未完成前,不要结束上一个层级的UX设计。 所以刚刚是讨论“设计阶段”,那么“设计要素”呢? 让我们看下Jesse James Garrett提到的设计阶段,可以作为一个常规UX流程示例来看看设计要素扮演的角色。 UX要素— Jesse James Garrett

UX要素— Jesse James Garrett

重申一遍,设计阶段不是遵循瀑布式模型,而是根据用户反馈交替重复的推进或者回滚。 1. 战略层 这个设计阶段做什么?
  1. 定义产品目标
  2. 考虑用户希望从产品中获得什么-用户需求
  3. 确定商业目标
包含要素
  • 策略—通过前文提到的策略和研究要素,定义产品目标和商业目标
  • 研究—同时,为了清晰商业目标和用户需求,需要进行竞品研究,市场研究和用户研究。这就是研究要素发光发热之处。
  • 如你所见,策略和研究要素可以同时采用,交替采用或者重复采用。
2. 范围层 这个设计阶段做什么?
  1. 定义产品的功能和特性
  2. 定义功能规格
  3. 定义内容需求
包含要素
  • 分析—范围层需要基于市场,用户和竞品的研究来进行分析,从而得出结论。
3. 结构层 这个设计阶段做什么?
  1. 产品结构的抽象展现
  2. 交互设计
  3. 定义信息架构
包含要素
  • 分析—分析范围层定义的需求和功能,从而得出产品结构或者信息架构
  • 设计—基于产品结构和信息架构,可以开始使用设计工具,比如流程图,开始交互设计的第一步。
4. 框架层 这个设计阶段做什么?
  1. 产品结构的具体展现
  2. 信息设计
  3. 交互设计
包含要素
  • 设计—重点设计已经定义的产品信息架构,可以使用低保真的线框图。简单的界面设计也可以开始进行,展现给用户进行反馈并验证。
  • 交付物—如果产品的信息架构设计没有问题,基于界面设计的用户反馈,可以开始着手包含视觉元素,品牌等的高保真原型设计
5. 表现层 这个设计阶段做什么?
  1. 最终的产品展现
  2. 决定了产品的界面风格,感觉和交互形式
  3. 进行用户测试
包含要素
  • 交付物—产品已经定义并展现,采用用户测试来进行验收,并将新的用户反馈纳入产品解决方案进行迭代优化。
希望对你有帮助! 以上就是设计要素在不同设计阶段所扮演的角色。你可以根据自己的需求,常用设计工具和设计习惯等定义你自己的UX流程。 下图是我自己的UX设计流程,和每一个设计阶段的所需时间,权当示例。 原文:https://uxdesign.cc/what-is-your-ux-process-2fa146eb8380 作者:Nadeeka Athukorala 译者:luserry (id:caiyunyisheji)


(ノ???)ノ*:??? 查看最受欢迎 301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 广东快乐十分下载软件 | 添加评论
]]>
//www.ksnb.net/what-is-ux-process.html/feed 0
  • 唐登杰任福建省代理省长 于伟国辞去省长职务 2019-07-31
  • 女子请“私家侦探”被骗3万 警方循线捣毁诈骗团伙 2019-07-31
  • 坚定不移全面深化改革 2019-07-28
  • 房价还会跌吗?这几条黄金线索告诉你背后的事实 ——凤凰网房产西安 2019-07-28
  • 天猫618开启全品类狂欢:面膜1分钟售出640万片 2019-07-23
  • 牢记嘱托 让重庆各项工作迈上新台阶重庆各界学习贯彻习近平总书记参加重庆代表团审议时的重要讲话精神 2019-07-23
  • 江苏淮安:雨后晚霞美如画(焦点瞬间) 2019-07-14
  • 如何能够成功的撩到李白? 2019-07-08
  • 全新奥迪A1内饰谍照曝光 年内正式亮相 2019-07-08
  • 寻找三秦非遗:二月二,大荔县阿寿村药王庙会赛花馍 2019-07-04
  • 一加手机5【报价 图片 参数 评测】 2019-07-04
  • 国家主席习近平发表二〇一七年新年贺词 2019-07-03
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-07-03
  • 端午假期虎门大桥最易拥堵 2019-07-02
  • 赋予妇女更多权利!沙特首次向女性发驾照 2019-07-02