cs界面设计文章及欣赏

运营与美工都要知道的落地页转化技巧

分享达人

提高落地页转化的技巧,运营与美工各自要做些什么

你知道设计风格里的“等距风格”是啥怎么画不?

博博

你知道设计风格里的“等距风格”是啥怎么画不?

UI巴巴 2018-08-16 20:26:18

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

1.等距是什么?

等距视图是指,绘制物体时每一边的长度都按绘图比例缩放,而物体上所有平行线在绘制时仍保持平行的一种显示方法。

最早是出现在电脑应用程式的图像,以及早期的8位元电子游戏,近几年来的被广泛的使用在因特网、GUI(Graphic User Interface)以及行动游戏等等。

2.等距视图游戏的历史

虽然计算机游戏的历史一直在20世纪70年代初期就看到了一些真正的3D游戏,但是第一个使用上述意义上的等距投影的不同视觉风格的视频游戏是20世纪80年代初的街机游戏。

1)20世纪80年代 

你知道设计风格里的“等距风格”是啥怎么画不?

高速公路遇袭(1985年)

等距视图是一种把2D游戏伪装为3D游戏的显示方法。使用这种方法的游戏有时候会被称作伪3D或2.5D

你知道设计风格里的“等距风格”是啥怎么画不?

蝙蝠侠(1986年)

执行等距视图的方法有很多,但为了简化,最有效最常用的一种——贴图法。从上面两张图可以看出,其上覆盖的菱形网格把地形划分贴图。

2)20世纪90年代 

你知道设计风格里的“等距风格”是啥怎么画不?

最终幻想III(1997)

你知道设计风格里的“等距风格”是啥怎么画不?

文明六世(2016)

在贴图法中,各个视觉元素都被切分为更小的部件,称为“贴图”,都是标准尺寸的。根据预先确定的平面数据——通常是2D数组,这些贴图被组织成游戏世界。

3)目前,2000

你知道设计风格里的“等距风格”是啥怎么画不?

SOCIOBALL(2015)

你知道设计风格里的“等距风格”是啥怎么画不?

纪念碑谷 (2016)

3.等距风格的图标、插画及应用范围

这种插画有一个专门的名字叫“isometric”。

应用范围很广,比如:icon、界面、启动页、插画、游戏、动画视频等等。

你知道设计风格里的“等距风格”是啥怎么画不?

图标

你知道设计风格里的“等距风格”是啥怎么画不?

字体

你知道设计风格里的“等距风格”是啥怎么画不?

插画

你知道设计风格里的“等距风格”是啥怎么画不?

海报

你知道设计风格里的“等距风格”是啥怎么画不?

启动页

4.常用绘制软件

目前常用的软件有PS、AI、C4D。

5.干货来啦~

虽然PS/AI都能画出等距图标,但是现在有一个软件Affinity Designer 比它们画等距图更加轻松。

你知道设计风格里的“等距风格”是啥怎么画不?

首先画等距我们需要画参考线,PS/AI都能画出来,但是方法还是稍稍显得复杂了一点,一些基本功不到位的同学会很头疼这个参考线的画法。Affinity Designer 的网格和轴管理器十分人性化的解决了这个问题。

不但对于新手来说是个不错的选择,而且它完美的融合了Adobe和sketch两个原本不相融的软件。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

网格类型选择等轴测,这样网格就会自动生成等距所需要的斜线。

并且它的网格还可以设置吸附功能,也就是画的每个元素都可以自动吸附在网格边缘。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

另外它还有一个十分便捷的功能,它的图形变形功能也十分强大。鼠标移动到矩形中间节点的会出现上下重叠的箭头(→),如下图:

你知道设计风格里的“等距风格”是啥怎么画不?

这样可以十分轻松的倾斜矩形到任意角度,并且还自动吸附到网格上了。

你知道设计风格里的“等距风格”是啥怎么画不?

拖拽矩形长宽的时候也是根据网格的路径来,不会影响矩形倾斜的角度。

你知道设计风格里的“等距风格”是啥怎么画不?

轻轻松松画一个小icon。

Affinity Designer这个软件目前只适用于苹果操作系统,在App Store商店里有售卖。

案例鉴赏:

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

↑软件:C4D、3D-MAX、MAYA等大部分3D软件

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UI设计经验|4个UI设计界面规范的实战总结

博博

UI设计经验|4个UI设计界面规范的实战总结

UI设计导师芳姐 2018-07-18 19:32:40

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

UI设计经验|4个UI设计界面规范的实战总结

设计规范的共性

不同的规范虽然内容差别很大,但是对比一下它们的目录,却又很多相似之处,通常包含:布局、组件、配色、图标这四部分。

组件里的分类无非是导航、菜单、表单、列表、表格、按钮、弹出框诸如此类,我就不一一列出了。

设计规范有哪几类?

总体看来,我发现这三类设计规范出现概率很高:

1、给产品经理看的

IOS和早些年的Android(现在已经统一改用Material Design)设计规范就属于给产品经理看的,里面写的东西大多围绕如何选择大的方向、哪种处理方式更加合理展开的,界面细节却没有详细介绍。

这种规范适合用来做演讲,内容不多,都很有道理,参杂这很多创新的功能。

而拿着它做设计却很痛苦,因为它不告诉你如何才能达到理念中所勾勒的那个目标,图标、尺寸、陪色、字体……很多东西都不明确。

2、给设计师看的

这种规范通常的好处是内容很丰富、图例很多、建议比较详细,能够让设计师以此为基础发挥自己的创造力。

Material Design就属于这一类,而且里面很多1:1的范例可以直接拿来做参考这点非常感人。

但这种规范也有不足之处。一是它缺乏针对具体场景的规则,常常把所有可能用到的元素都拿出来一一细说,然而却不告诉你应该在什么场合使用什么。

二是容易理想化,因为做这种规范的人通常是纯粹的设计师,所以里面很多设计想法未必有足够的可实现性,或是一些创意未必经得过实践的考验。

Material Design里面很多看起来简单的设计其实是很难实现的,例如用分辨率敏感的dp取代像素单位其实大部分情况下很难实现。

UI设计经验|4个UI设计界面规范的实战总结

Material Design的文本框中,说明文字会变换位置和大小,排多了看起来会很乱。

3、给程序员看的

这类不太关心布局、交互、配色等细节,而是告诉读者他们能做出什么东西,怎么做出那些东西。

这类规范笔我原本预想的要多很多,其中令我印象最深刻的是Windows Phone的设计规范。

程序员的队友都称赞Windows的设计规范有多好多好,只有我觉得用起来无比痛苦。

现在想来,Windows Phone的设计规范虽然称之为设计规范,区别于Windows Phone的开发规范,但它完全是个教程序员如何实现各种界面的指南。

产品经理可能还可以用它来看看页面类型,对设计师来说却没有太大帮助。

这种规范对于不需要设计师的场景还是非常有帮助的,比较相比前两种,这种的可实现性非常高。

设计规范的选取

我认为上文提过的三种设计规范都很重要,且适用于不同的场合。

第一类给产品经理看的规范适合设计初期,确定理念、报告思路阶段。

第二类给设计师看的规范适合在设计定型阶段,这个时候界面具体长什么样已经确定了,但是未来的实施过程还会带来一些不确定因素。

第三类规范适用于开发阶段,根据界面来规范代码,能够大大提升前段的开发效率。

设计规范的常见遗漏

由于第一类规范的内容要求不多,所以这里的遗漏主要针对后面两类。

1、文本格式

设计师常过分专注于画图,而忘记了文字也应该有所规范。例如,日期可能的格式有很多。

例如“YYYY年MM月DD日”、“YYYY年M月D日”、“YYYY/MM/DD”等等。

再比如说单位,是用“大小:100M”、“大小:100兆”还是“大小(M):100”呢?

这些文本格式定义起来并不花时间,可是如果没有规范的话,可能同一个东西在每个页面的展示方式都不一样,对用户来说也挺烦的。

2、特殊状态

做设计和做规范的区别是,做设计时,只有在知道某个东西有某个状态时,才会去设计那个状态;

做规范时,通常要假定所有数据和操作都有状态,不同东西在不同地方的同类状态最好能够统一。

所有操作都可能失效,不管是按钮、链接、输入框、下拉菜单……什么情况在失效时显示失效状态,什么时候完全隐藏该操作,这些都是可以统一考虑设计的东西。

所有的操作都可能出错,尤其是输入框的出错率极高。如果出错了,如何告诉用户哪里错了?如何纠正?由此还可以联想到,如何在一开始就避免用户犯错?

所有摆放数据的地方都有可能没有内容,也许是列表为空,也许是字段为空。这种情况该如何明确又美观地告诉用户这里没有内容不是网络问题也不是系统问题?

UI设计经验|4个UI设计界面规范的实战总结

△ 页面没有内容的显示效果

所有内容都有可能出现异常,网络不稳定、格式不支持、系统出错等。这种状况如何明确又美观地告诉用户可能是哪里出现问题,如何补救?

成功也需要有成功的状态,有些时候页面不止一项任务,第一项成功了,第二项失败了,用户走到第三项时不一定还记得第一项是成功的还是失败的。

3、多级多选和过量

一个灵活的界面规范能够应对大部分的内容变化。例如导航和菜单的项目数量和级数通常是不确定的,下拉选框也不一定只能勾选一项内容。

更灵活的情况还有,一篇文章可能长达数十屏,这时该自动识别文章内的标题并生成目录,还是分页展示?

4、使用指南

使用指南是设计过程中通常被拖到最后才想起来的东西,在规范里也常被忽视。其中最重要的是用户首次使用时看到的操作指南。

这种操作指南可能不只在首页出现,并且未来可能随着设计的变更而变更,所以这种首次使用的操作指南是很有必要做成规范的。

UI设计经验|4个UI设计界面规范的实战总结

△ 首次使用的操作指南

此外,使用过程中,在关键时候出现的操作提示也可以有规范。例如用户进入一个新功能时,可能会出现该功能的介绍。

5、尺寸适配

响应式界面已经被说了这么多年了,而被明确放在规范里的,除了Material Design之外还真是很难找到了。

如果你想了解响应式界面,可以看我之前的文章《设计响应式界面该清楚哪些》。

响应式界面有很多分类和实现方式,不论是视觉、交互还是前段都有所涉及,每个页面和元素都可能根据实际情况需要特殊处理,这也是为什么响应式设计很难定制规范。

UI设计经验|4个UI设计界面规范的实战总结

△ 响应式界面:如果是页面是容器,内容就像水一样

除了整个页面的适配之外,小的组件也最好是可能变化尺寸的。例如同一张图表,可能被放在一个很空旷的页面,也有可能被放在一个很拥挤的页面。

需要调整尺寸时,哪些可以缩放哪些不能缩放,对其的中心是什么……这些如果能够明确,设计将会变得越来越像拼图。

除了整个页面的适配之外,小的组件也最好是可以自动调整尺寸。例如同一张图表可能被放在一个很空旷的页面,也有可能被放在一个很拥挤的页面。

组件需要调整尺寸时,哪些可以缩放哪些不能缩放,对其的中心是什么……这些如果能够明确,设计将会变得越来越像拼图。

6、动效

动效也火了很久了,但是似乎还是停留于表面,缺少一套可依赖的标准。动效师并不好当,既要有超高的编码能力,又要有敏感的美学神经。

也许就是因为这么困难,才导致大部分设计规范即便包含动效这一目录,里面填充的内容也非常模糊不清。

7、音效

大部分应用是没有音效的,因为音效很容易让人厌烦,而且节奏不好把控。但是对于音乐、视频等媒体应用,音效的发挥空间却很大,至今尚未开发。

撇开这些不谈,如果有音效,何时使用何种、多大音量、时长多少、震动模式(手机)时需不需要震动反馈,很多东西都可以考虑。

8、手势

和键盘的快捷键一样,偏爱触屏手势的也大有人在,而且手势也能让产品更加独特。如果允许使用手势,这部分也可以有所规范。

9、国际化

如果界面上的语言种类不止一种,那么如果文字转换后过长或过短怎么办?用户在看不懂当前语言的情况下如何切换语言?

不同的语言该选择什么字体才不至于太难看(例如中文的默认字体通常是宋体)?

10、小众人群

虽然我们最关心的还是主流用户,但是很多小众人群组合起来也是可以构成一定分量的。例如,触屏应用能不能给左手使用者舒适的体验?

桌面应用能不能够让没有鼠标或是没有键盘的人使用?色盲和色弱能区分界面上的色块?视力较差的人能不能放大字。

希望以上内容对你学习UI设计有帮助,觉得可以请转发支持一下,持续分享更多UI设计优秀文章。

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

优秀UI界面设计评析

博博

优秀UI界面设计评析

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

男生运动鞋商店支付界面,颜色搭配非常舒服,鞋子摄影也很漂亮,字体字号运用非常到位。

优秀UI界面设计评析

和上图一样的运动鞋支付界面,采用简洁风格,有右伴部分中的金色芯片元素,非常有意思,即表明了支付意思,也很好的点缀了整个界面。

优秀UI界面设计评析

颜色搭配非常好,给人高端的感觉,在输入正确的状态才出现一个橙色的图标做到画龙点睛的作用,个人非常喜欢。

优秀UI界面设计评析

界面设计排版合理,视觉感非常好,产品内容机械手表效果非常靓,质感也很好。喜欢

优秀UI界面设计评析

偏日系的设计风格排版,简洁而不简单,个人也是挺喜欢的。

优秀UI界面设计评析

和上图的设计风格一致,属于那种简单的配色排版,给人的感觉就是很舒服 我喜欢这种。

优秀UI界面设计评析

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档