展望下一年的网页设计配色趋势
一、Metro和柔和鲜嫩的色彩 Odam Luiran的网站是Metro风格,这种风格尤其适合一些比较鲜嫩柔和的颜色,扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛。这样的色彩基调将在2015年得到进一步的延续
任何设计都应该有它存在的理由。很多同学在设计练习的时候都无法确定设计命题,信息层级划分,操作的层级划分,甚至觉得命题练习很迷茫。所以今天我就带领大家一起分析一个实际已经上市的产品的UI样例。帮助大家分析UI信息中的必然因素。
我今天查看天气的时候打开了一款天气app
很多人应该对这款app都很熟悉,我们首先可以看到,这款软件是可以横竖屏自动适应的。从构图比例来说,这款软件是以竖屏作为主要显示模式的。在竖屏的情况下,观看效果最佳。
我们先不谈层级问题,我们先来浏览一下完整的信息。
下拉信息框以后,这里出现了一个商用ui不应该犯的错误。
当信息全部下拉到底的时候,信息上边缘有一排未显示完全的文字,漏边了。这个琐碎的文字边角,破坏了整体的UI视觉完整性。
其实这个缺陷是可以避免的,只需要在程序上调整一下文字距离
(这种ui中的错误,其实不算多,但是也不算少)
因为这个软件,在横竖屏上都需要自适应尺寸,所以取的是一个平均距离,理论上,ui人员在检查UI的时候,是可以让程序人间进行修正的。
横屏的下拉信息也是不完整的。这种问题跟上面一样,都是可以通过程序坐标修改间距的。
那么这个问题严不严重呢?其实这就很主观了。因为可以拖拉的面板,除了最上和最下位置,它其实还有很多手动的中间位置,不可能保证所有信息的视觉完整性。是可以通过程序调整,让信息看起来更完整,但是这所花费的时间,精力,成本,和所获得的用户体验之间的性价比,那只有研发人员才能去权衡了。
下面我们来看一下操作栏。
最上面的按钮是添加城市,这个按钮几乎没有多少可操作性,除了第一次打开软件设置它以外,可能出差旅游,会点按几次。
有些软件的这个位置,属于频繁操作位置,但是在这里不是,因为当你单手持握手持设备的时候,这个位置其实并不好点按。
天气按钮:打开软件的时候是默认开启的。一般用户在看完天气以后,点按其他信息之后,很少会再点回天气了。所以这也属于一个很低操作的按钮。
时景:这个东西,其实存在感可有可无。
关键的地方来了:指数按钮
指数按钮其实是一个跟天气密切相关的信息,为什么被放在第四位?
还被放在了可有可无的时景下面?
原因很简单:最易操作位置!
为什么这个位置最易操作?当你单手持握设备的时候,不是在你手旁边的按钮最容易按到,而是稍微远一点,的更容易操作,第一是因为视觉上看的清楚,第二是因为人的手指,伸展,比回拉更容易。
地图按钮:
地图:天气的具体位置,也是非常频繁操作的按钮,但是相比较来说,地图点按几率,可能没有指标那么高。
下面三个按钮:
一个是用户登陆
一个是软件推荐
一个是设置
这三个都属于低操作需求的按钮,甚至都很少有人去碰它,几个月点一两次都正常,一年不点也正常。
但是他们为什么不排列在其他按钮的下面,而放到底下?
不仅仅是因为视觉区分的原因。
左侧触摸栏,最容易触摸的位置,其实最容易误操作,如果一个ui设计的太方便点按,一样也会给用户带来麻烦。所以最容易误操作的区域,能空则空。
所以我们来看一下操作难易度,与信息层级的对比
所以,当你去分析一个产品的时候,要多想一下,为什么,为什么它们在那里,而不再其他的位置上?
我们再回过头来看一下横屏。。。
信息栏,因为自适应横竖屏幕,但是它的宽度依然保持不变,横屏的时候会发现,几乎等于浪费了一半的可视范围。那么我们能不能考虑把所有天气信息都放出来呢?
不能!
有几个原因:
1太多信息一眼看上去你是无法一次性快速分辨的。
2下拉的竖向浏览信息,其实效率很高。尽可能简化用户信息读取量才能尽可能的让信息交流效率更高。
3从成本上考虑。比起分别制作不同显示方向上适应修改,这个成本多数情况下不值得。
我们来看一下,在UI设计里,有哪些目的:
1信息传达的效率
2信息的传达顺序
3操作的效率
4视觉上的美观
信息的传达效率和传达顺序,不分先后,因为项目需求不同,这两者根据需求是可以互换的,但是前提是只有一个为主。
操作效率比美观更重要。
所以这里牺牲最大的就是视觉上好不好看这一点了。其实市面上是很难找到几个视觉上巨丑无比的UI范本的。因为UI本身并不复杂,所以哪怕是为各种目的做了牺牲和割舍,也依然有很多可调整空间。
去了解市场上的应用软件,游戏,网站,区分内容和信息,区分功能区域,然后去思考他们的设计目的,原始初衷,是很好的设计练习。做这种练习,记得一定要写个人笔记,因为工作以后,你会发现,你的工作与这些问题几乎相同。
在你还没有特别个性的设计之前,积攒市场上的产品熟悉度,也是学习的一个方法。甚至可以叫做职业素养。
如果有问题可以给我留言,我尽可能的写成详细教程,比聊天要规范的多,也更容易理解。今天就到这吧。
所以,当你去分析一个产品的时候,要多想一下,为什么,为什么它们在那里,而不再其他的位置上?
我们再回过头来看一下横屏。。。
信息栏,因为自适应横竖屏幕,但是它的宽度依然保持不变,横屏的时候会发现,几乎等于浪费了一半的可视范围。那么我们能不能考虑把所有天气信息都放出来呢?
不能!
有几个原因:
1太多信息一眼看上去你是无法一次性快速分辨的。
2下拉的竖向浏览信息,其实效率很高。尽可能简化用户信息读取量才能尽可能的让信息交流效率更高。
3从成本上考虑。比起分别制作不同显示方向上适应修改,这个成本多数情况下不值得。
我们来看一下,在UI设计里,有哪些目的:
1信息传达的效率
2信息的传达顺序
3操作的效率
4视觉上的美观
信息的传达效率和传达顺序,不分先后,因为项目需求不同,这两者根据需求是可以互换的,但是前提是只有一个为主。
操作效率比美观更重要。
所以这里牺牲最大的就是视觉上好不好看这一点了。其实市面上是很难找到几个视觉上巨丑无比的UI范本的。因为UI本身并不复杂,所以哪怕是为各种目的做了牺牲和割舍,也依然有很多可调整空间。
去了解市场上的应用软件,游戏,网站,区分内容和信息,区分功能区域,然后去思考他们的设计目的,原始初衷,是很好的设计练习。做这种练习,记得一定要写个人笔记,因为工作以后,你会发现,你的工作与这些问题几乎相同。
在你还没有特别个性的设计之前,积攒市场上的产品熟悉度,也是学习的一个方法。甚至可以叫做职业素养。
如果有问题可以给我留言,我尽可能的写成详细教程,比聊天要规范的多,也更容易理解。今天就到这吧。
任何设计都应该有它存在的理由。很多同学在设计练习的时候都无法确定设计命题,信息层级划分,操作的层级划分,甚至觉得命题练习很迷茫。所以今天我就带领大家一起分析一个实际已经上市的产品的UI样例。帮助大家分析UI信息中的必然因素。
我今天查看天气的时候打开了一款天气app
很多人应该对这款app都很熟悉,我们首先可以看到,这款软件是可以横竖屏自动适应的。从构图比例来说,这款软件是以竖屏作为主要显示模式的。在竖屏的情况下,观看效果最佳。
我们先不谈层级问题,我们先来浏览一下完整的信息。
下拉信息框以后,这里出现了一个商用ui不应该犯的错误。
当信息全部下拉到底的时候,信息上边缘有一排未显示完全的文字,漏边了。这个琐碎的文字边角,破坏了整体的UI视觉完整性。
其实这个缺陷是可以避免的,只需要在程序上调整一下文字距离
(这种ui中的错误,其实不算多,但是也不算少)
因为这个软件,在横竖屏上都需要自适应尺寸,所以取的是一个平均距离,理论上,ui人员在检查UI的时候,是可以让程序人间进行修正的。
横屏的下拉信息也是不完整的。这种问题跟上面一样,都是可以通过程序坐标修改间距的。
那么这个问题严不严重呢?其实这就很主观了。因为可以拖拉的面板,除了最上和最下位置,它其实还有很多手动的中间位置,不可能保证所有信息的视觉完整性。是可以通过程序调整,让信息看起来更完整,但是这所花费的时间,精力,成本,和所获得的用户体验之间的性价比,那只有研发人员才能去权衡了。
下面我们来看一下操作栏。
最上面的按钮是添加城市,这个按钮几乎没有多少可操作性,除了第一次打开软件设置它以外,可能出差旅游,会点按几次。
有些软件的这个位置,属于频繁操作位置,但是在这里不是,因为当你单手持握手持设备的时候,这个位置其实并不好点按。
天气按钮:打开软件的时候是默认开启的。一般用户在看完天气以后,点按其他信息之后,很少会再点回天气了。所以这也属于一个很低操作的按钮。
时景:这个东西,其实存在感可有可无。
关键的地方来了:指数按钮
指数按钮其实是一个跟天气密切相关的信息,为什么被放在第四位?
还被放在了可有可无的时景下面?
原因很简单:最易操作位置!
为什么这个位置最易操作?当你单手持握设备的时候,不是在你手旁边的按钮最容易按到,而是稍微远一点,的更容易操作,第一是因为视觉上看的清楚,第二是因为人的手指,伸展,比回拉更容易。
地图按钮:
地图:天气的具体位置,也是非常频繁操作的按钮,但是相比较来说,地图点按几率,可能没有指标那么高。
下面三个按钮:
一个是用户登陆
一个是软件推荐
一个是设置
这三个都属于低操作需求的按钮,甚至都很少有人去碰它,几个月点一两次都正常,一年不点也正常。
但是他们为什么不排列在其他按钮的下面,而放到底下?
不仅仅是因为视觉区分的原因。
左侧触摸栏,最容易触摸的位置,其实最容易误操作,如果一个ui设计的太方便点按,一样也会给用户带来麻烦。所以最容易误操作的区域,能空则空。
所以我们来看一下操作难易度,与信息层级的对比
任何设计都应该有它存在的理由。很多同学在设计练习的时候都无法确定设计命题,信息层级划分,操作的层级划分,甚至觉得命题练习很迷茫。所以今天我就带领大家一起分析一个实际已经上市的产品的UI样例。帮助大家分析UI信息中的必然因素。
我今天查看天气的时候打开了一款天气app
很多人应该对这款app都很熟悉,我们首先可以看到,这款软件是可以横竖屏自动适应的。从构图比例来说,这款软件是以竖屏作为主要显示模式的。在竖屏的情况下,观看效果最佳。
我们先不谈层级问题,我们先来浏览一下完整的信息。
下拉信息框以后,这里出现了一个商用ui不应该犯的错误。
当信息全部下拉到底的时候,信息上边缘有一排未显示完全的文字,漏边了。这个琐碎的文字边角,破坏了整体的UI视觉完整性。
其实这个缺陷是可以避免的,只需要在程序上调整一下文字距离
(这种ui中的错误,其实不算多,但是也不算少)
因为这个软件,在横竖屏上都需要自适应尺寸,所以取的是一个平均距离,理论上,ui人员在检查UI的时候,是可以让程序人间进行修正的。
横屏的下拉信息也是不完整的。这种问题跟上面一样,都是可以通过程序坐标修改间距的。
那么这个问题严不严重呢?其实这就很主观了。因为可以拖拉的面板,除了最上和最下位置,它其实还有很多手动的中间位置,不可能保证所有信息的视觉完整性。是可以通过程序调整,让信息看起来更完整,但是这所花费的时间,精力,成本,和所获得的用户体验之间的性价比,那只有研发人员才能去权衡了。
下面我们来看一下操作栏。
最上面的按钮是添加城市,这个按钮几乎没有多少可操作性,除了第一次打开软件设置它以外,可能出差旅游,会点按几次。
有些软件的这个位置,属于频繁操作位置,但是在这里不是,因为当你单手持握手持设备的时候,这个位置其实并不好点按。
天气按钮:打开软件的时候是默认开启的。一般用户在看完天气以后,点按其他信息之后,很少会再点回天气了。所以这也属于一个很低操作的按钮。
时景:这个东西,其实存在感可有可无。
关键的地方来了:指数按钮
指数按钮其实是一个跟天气密切相关的信息,为什么被放在第四位?
还被放在了可有可无的时景下面?
原因很简单:最易操作位置!
为什么这个位置最易操作?当你单手持握设备的时候,不是在你手旁边的按钮最容易按到,而是稍微远一点,的更容易操作,第一是因为视觉上看的清楚,第二是因为人的手指,伸展,比回拉更容易。
地图按钮:
地图:天气的具体位置,也是非常频繁操作的按钮,但是相比较来说,地图点按几率,可能没有指标那么高。
下面三个按钮:
一个是用户登陆
一个是软件推荐
一个是设置
这三个都属于低操作需求的按钮,甚至都很少有人去碰它,几个月点一两次都正常,一年不点也正常。
但是他们为什么不排列在其他按钮的下面,而放到底下?
不仅仅是因为视觉区分的原因。
左侧触摸栏,最容易触摸的位置,其实最容易误操作,如果一个ui设计的太方便点按,一样也会给用户带来麻烦。所以最容易误操作的区域,能空则空。
所以我们来看一下操作难易度,与信息层级的对比
所以,当你去分析一个产品的时候,要多想一下,为什么,为什么它们在那里,而不再其他的位置上?
我们再回过头来看一下横屏。。。
信息栏,因为自适应横竖屏幕,但是它的宽度依然保持不变,横屏的时候会发现,几乎等于浪费了一半的可视范围。那么我们能不能考虑把所有天气信息都放出来呢?
不能!
有几个原因:
1太多信息一眼看上去你是无法一次性快速分辨的。
2下拉的竖向浏览信息,其实效率很高。尽可能简化用户信息读取量才能尽可能的让信息交流效率更高。
3从成本上考虑。比起分别制作不同显示方向上适应修改,这个成本多数情况下不值得。
我们来看一下,在UI设计里,有哪些目的:
1信息传达的效率
2信息的传达顺序
3操作的效率
4视觉上的美观
信息的传达效率和传达顺序,不分先后,因为项目需求不同,这两者根据需求是可以互换的,但是前提是只有一个为主。
操作效率比美观更重要。
所以这里牺牲最大的就是视觉上好不好看这一点了。其实市面上是很难找到几个视觉上巨丑无比的UI范本的。因为UI本身并不复杂,所以哪怕是为各种目的做了牺牲和割舍,也依然有很多可调整空间。
去了解市场上的应用软件,游戏,网站,区分内容和信息,区分功能区域,然后去思考他们的设计目的,原始初衷,是很好的设计练习。做这种练习,记得一定要写个人笔记,因为工作以后,你会发现,你的工作与这些问题几乎相同。
在你还没有特别个性的设计之前,积攒市场上的产品熟悉度,也是学习的一个方法。甚至可以叫做职业素养。
如果有问题可以给我留言,我尽可能的写成详细教程,比聊天要规范的多,也更容易理解。今天就到这吧。