首页

浅谈谷歌Circle UI

蓝蓝设计的小编

这段话是我补上的,我是设计师Johnson1949

提到谷歌原生系统UI大家有的人不是很喜欢,有的人可能已接触到安卓手机系统=谷歌系统UI其实,有一些偏颇,2014年的谷歌系统UI还是比较难看,不过自从采用material design风格以来,流畅度和色彩搭配,图标的设计真的不错了,目前小编用的是motonexus6,旨在体验谷歌系统UI。有需要的可以试一下。

UI设计闪屏/启动页/引导页制作技巧

博博

UI设计闪屏/启动页/引导页制作技巧

云和数据西安中心 2018-07-02 14:19:10

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

需要做一个“开屏页”

“哪个开屏页”

“带跳过的哪个”

“带跳过的。是一页的那个还是可以滑动的?”

“滑动的”

上面的对话不知道有没有很熟悉。

我们都知道APP在启动时会有一些页面先行展示,例如这样

UI设计闪屏/启动页/引导页制作技巧

通常来说我们会简单的把它们统称为“开屏页”或者“启动页”

但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝

宝们表示很委屈。

UI设计闪屏/启动页/引导页制作技巧

其实这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏 Splash Screen、启动页 Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法。

01 闪屏 Splash Screen

定义:闪屏是每次启动过程中展示给用户的一个过渡页面,用于减缓用户在打开应用时等待的焦虑心情。

UI设计闪屏/启动页/引导页制作技巧
UI设计闪屏/启动页/引导页制作技巧

交互方式:闪屏通常是一张背景图片,无法进行交互,无法点击也无法跳转

劣势:无法跳转,只能进行展示作用,无法很好的承载营销需求

优势:展示时间不可控

使用建议:

避免包含太多文字字符(阅读速度慢的话可能还没看完就关闭了)

不用过去吸引用户的注意(干扰用户的本来目的)

不要做广告(干扰,且不能点击)

02 启动页Launch Screen

定义:启动页形式闪屏但拥有交互功能,常用于展示营销活动广告图片并引导用户点击

使用示例:常用与展示营销活动广告图片并引导用户点击

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、点击页面或按钮进入活动承载页

2、点击跳过,跳过启动页,进入首页,或N秒后自动消失

注:由于加载时间不确定,启动图通常会缓存并存在下次启动时使用

03 引导页Onboarding Screen

定义:用户安装或更新后首次启动时展示数个页面,常用于介绍应用的核心概念,功能玩法,使用场景,核心变更

使用示例:

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、左右滑动可以切换

2、最后一页页面可点击进入

注:首次打开才出现,之后就不在出现,清除用户数据,再次打开应用可以看到

使用建议:

1.轻易不要使用引导页,以免阻碍用户快速的使用体验

2.为了降低用户反感程度,引导页数通常越少越好(<5)

3.尽量提供“跳过”按钮

4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明

(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)

劣势:

增加了用户进入产品的时间,用户翻页过多,可能会失去耐心,降低好感度

04常规的启动流程

通常来说:开屏三兄弟顺序如下:

UI设计闪屏/启动页/引导页制作技巧

流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。

小结

Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。

这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。

UI设计闪屏/启动页/引导页制作技巧

不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信

你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~


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



APP中搜索框的样式以及区别

博博

APP中搜索框的样式以及区别

云和数据西安中心 2018-07-09 13:24:29

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



前言

搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式。

下面就和大家聊聊常见的四种样式:一级tab、顶部搜索、搜索 icon 、隐藏式搜索

01.一级tab

位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ,简单、识辨度高符合用户已有的认知。

部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能,在“发现”页面中,由于增加其他运营内容导致流量被分摊,搜索相对就会弱一些。

一级 tab 相比其他方式,搜索过程更方便,点击操作更容易。

APP中搜索框的样式以及区别

例如在贝壳找房 app 中,“找”作为该 app 的重要功能单独设立一个入口,用户搜索时无需进入二级页面中去完成条件筛选,搜索过程更方便、一目了然。

在筛选中选择总价、房型、特色、朝向等条件后,点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出,再次回到该页面后,仍会保留上一次操作的结果,方便下次修改和查找。

贝壳找房和 App Store 搜索入口在底部导航,这个位置符合拇指热力区操作,屏幕偏下的位置单手持握手机的时候更容易点击。

需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口,过于拥挤不适合用户点击。

02.顶部搜索

位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。当用户浏览的时候,搜索框也会悬停在顶部,不断引导用户进行搜索。

通常以搜索框的形式存在,为了突出搜索框,搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。

不同类型的 app 搜索功能也不一样,除了文本搜索,淘宝有图片搜索功能,方便拍图找物;虾米音乐还有语音搜索功能,方便查歌找曲。

顶部搜索相比其他方式,搜索入口更显眼,为转化提供更多流量。

APP中搜索框的样式以及区别

例如在天猫 app 中,当用户进入的时候,部分是带着明确的购买意图,这时就需要让他们快速找到搜索功能。所以天猫 app 把搜索框置顶在导航栏上,即使是在上滑的时候,也是在顶部。

在顶部搜索框内推荐了客厅地毯,根据用户的历史搜索行为触发的引导,在用户已经搜索的基础上,转化率会大大的提升。 App 运营还会根据热点、时节更换搜索框的预设关键词,能吸引更多的点击量。

APP中搜索框的样式以及区别

需要注意的是结合场景去使用搜索功能,例如支付宝,刚进入 app 用户可能找不到想要的功能在哪里,这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候,用户想要浏览推荐内容,搜索功能相对减弱,为了减少空间占用,搜索框变搜索 icon 。

03.搜索icon

使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。

搜索 icon 相比其他方式,搜索位置更灵活,可以单独出现,也可以和其他功能组合。

APP中搜索框的样式以及区别

当搜索功能在页面中不再是高频使用功能时,仅通过搜索 icon 让用户知晓有搜索功能存在即可。由于搜索 icon 占用区域少,可与其他功能组合出现,例如 in ;也可单独出现,如猫眼,仅靠图标标红来提示用户此功能。

APP中搜索框的样式以及区别

需要注意的是在同一个 app 的不同页面中,由于对搜索功能的需求不同,有些页面会选择搜索 icon ,有些页面会选择顶部导航。例如天猫 app ,在品牌页面中,对于用户即将浏览的内容都是根据用户行为产生和运营推荐的,自然搜索功能也会弱一些,采用搜索icon 即可。天猫首页强调引导用户去搜索、购买商品,采用顶部搜索框。

04.隐藏式搜索

位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的,当用户下拉页面时,顶部搜索框才会出现,这就和使用场景密不可分。

APP中搜索框的样式以及区别

微信首页(iOS端)刚进来的时候主要以处理最近回复为主,搜索功能相对弱化,在用户浏览列表的时候,搜索框也不会悬停在顶部导航。而在第二个 tab 通讯录列表中,主要以查找联系人为主,搜索功能一开始进入就显示在列表顶部。

总结

绝大部分的 app 里带有搜索功能,搜索功能可以帮助用户快速找到所需内容,减少时间成本。搜索也是提高流量的重要入口,吸引用户注意力。

但想要搜索在页面中恰如其分的应用并不那么容易,需要引导用户行为和分析使用场景,这就依赖我们前期大量样式积累,才能输出合理的设计方式。

我们再来回顾文中提及的四种搜索框样式:

1.一级 tab :位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。

2.顶部搜索:位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。

3.搜索 icon :使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。

4.隐藏式搜索:位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。


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






UI界面超逼真!Magic Leap One曝光2款虚拟现实新应用

蓝蓝设计的小编

据悉,Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面,有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。

一看就懂,详解大厂ui设计制作规范步骤

博博

一看就懂!详解大厂UI设计规范制作步骤

小小设计控 2018-07-30 09:34:38

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


小小设计控 2018-07-30 09:34:38
一看就懂!详解大厂UI设计规范制作步骤

一、提取设计原则关键词

一看就懂!详解大厂UI设计规范制作步骤

1. 提取一级关键词

一看就懂!详解大厂UI设计规范制作步骤

第一步,先要去提取出关键词,这个关键词怎么来,有几种方式获取,第一个从整个公司战略出发,任何一个产品一定有他的战略,品牌战略,商业战略。举个例子,假设我们是 eaby,公司今年战略是全球化,高品质,正品,那么这个就是一级核心关键词,所有的设计语言一定要和公司战略结合起来,可以理解为战略关键词是整个设计语言顶部金字塔。

二、运用情绪版提取二级关键词

一看就懂!详解大厂UI设计规范制作步骤

有了一级关键词后,需要去思考,那么什么样的设计能给人全球化的感受呢,什么样的感觉能有高品质,正品应该传递什么样的感觉呢?此刻需要用到第二个方法就是情绪版,通过情绪版去把符合这些关键词感受的图形具体化。

三、高品质特征是什么?

下图是一组日本的花茶设计,那么在这组设计中,设计师是如何体现高品质呢?

一看就懂!详解大厂UI设计规范制作步骤

△ 首先包装很精美耐看,设计简约

一看就懂!详解大厂UI设计规范制作步骤

△ 做工精量,整个产品包装,都是在富士山脚下

一看就懂!详解大厂UI设计规范制作步骤

△ 采摘环境很透明,值得被信任

一看就懂!详解大厂UI设计规范制作步骤

△ 整个品茶的过程也特别让人向往,很有仪式感

一看就懂!详解大厂UI设计规范制作步骤

△ 整个的设计很完整,很有设计感在里面

一看就懂!详解大厂UI设计规范制作步骤

通过以上案例拆解,我们能对这个高品质的关键词有更加进一步的理解,高品质原来在情感层面是一个这么抽象的感觉,但是很多同学会问,那么这二级词汇也很抽象,如何靠这个来做设计,很难去理解及表达,别着急,还有下一步。

1. 高品质设计表现形式?

关于高品质在视觉形式上如何来体现了,哪些设计感觉能代表高品质呢,这个时候就需要我们去寻找一些设计参考,这些案例要能代表高品质。

一看就懂!详解大厂UI设计规范制作步骤

△ 清晰的有品质的图片

一看就懂!详解大厂UI设计规范制作步骤

△ 牛皮癣,不精致不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 优雅的排版和留白,文字清晰,杂志感受

一看就懂!详解大厂UI设计规范制作步骤

△ 图文密集,缺少版式不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 精致的布局,栅格的体系,给人品质感

一看就懂!详解大厂UI设计规范制作步骤

△ 缺乏版式及设计感

一看就懂!详解大厂UI设计规范制作步骤

△ 有设计细节的

一看就懂!详解大厂UI设计规范制作步骤

△ 无细节不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 合理的配色,简单清晰

一看就懂!详解大厂UI设计规范制作步骤

△ 山寨的配色不可取

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

△ 设计的延续性和完整性

2. GOOD CASE

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

3. BAD CASE

一看就懂!详解大厂UI设计规范制作步骤

四、设计分层

以上就是我们从一个战略关键词逐步推导到一级关键词,到二级关键词,到设计手法,以及对应设计表达,推导的一个全过程。

  • 本能层:清晰的,有设计感的,做工精致
  • 行为层:完善的,值得信任的,用心的
  • 精神层:让人向往的,值得期待的
一看就懂!详解大厂UI设计规范制作步骤

五、总结

以上大概为一个设计关键词的全部推导过程及到设计手法的确定,也是设计语言里面最难的部分,后面的关键词也是类似的思考方法和思路,最终通过推导我们需要得出每个关键词的情绪图,以及对应设计特征,最终需要在界面中展示的形色字构质,一个完整过程。

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

比如国际化,同样通过前面思路,我们需要去思考国际化如何在设计中体现,去提炼出代表国际化的象征物,如地标,国旗,邮戳,货币等等,包括如何在界面中融于国际化元素,以及人物和节日场景。

结语

希望大家可以通过我这期的分享,能够详细理解到如何从公司战略层提取到核心一级关键词,到二级关键词,以及对应的设计手法,对应到形色字构质,大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。

最后,依据推导出来的原则,以及对应的设计手法去做概念,去在界面中运用,最终完成设计语言第一步,设计关键词和设计手法定义。

图片素材作者:Tran Mau Tri Tam ✪



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



如何创建人物插图——2018年世界杯版

博博


如何创建人物插图——2018年世界杯版 

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


五步创作2018世界杯超级球星插画


2018年世界杯赛正在如火如荼地进行,为了以示庆祝,我们挑选了来自多个国家的25位超级明星,给他们创作人物插图,送给广大球迷们。在创作过程中,Leo Natsume&Daniel Nyari给了我们很多灵感,非常感谢!


为了准确地画出每个球星的面部结构特征,一开始收集材料的时候就要收集的全一些。我们要从照片中提取每位球星的准确特征,这样最后做出来的插画才能“形神兼备”,才能非常生动。

让我们一起来看看设计思考的过程吧。



    

第一步


观察人物要从不同角度来看——正面,45度和侧面轮廓。此外,我们还需要收集不同面部表情的照片,比如冲刺的时候、休息的时候、微笑的时候等,才能更了解人物。做设计,我们不仅要看到“形”,还要看到“神”,多了解人物的个性和习惯有助于我们做出更有灵魂的设计创意。





第二步


接下来,我们要根据刚刚从不同角度做的人物分析总结一般面部结构和特征。我们以梅西为例,他留着经典的复古发型、大耳朵、小而有神的眼睛。当然,为了保持插图最终的统一性,所有人物的视线水平需要保持一致,并且应该根据人脸的长度和宽度以及发型进行调整。






第三步


通过前两个步骤之后,现在我们已经有了人物的主要图像了。现在,可以开始考虑人物的种族,肤色,发型和制服的颜色了,这样有助于做出原汁原味的人物视觉。同时,我们必须调整整体色调来调节亮度和饱和度的差异。





第四步


这是最关键的一步。完成以上所有操作后,就可以根据前面步骤中收集的照片选择每个球星最具特色的面部表情。例如,梅西微笑着轻轻抬起头的样子最吸引人,我们就选这个表情。







第五步


这是最后一步,我们将做细节的调整,包括人物的整体图像结构、颜色对比度、面部元素之间的比例等。然后再添加其他内容,如条纹、耐克/阿迪达斯徽标和其他此类细节。最后,将设计草稿缩小200%,以确定某些地方的设计是否足够亮。





经过上述五个步骤之后,我们的球星插画就出炉啦。我们一共设计了25位球星插画,挑选部分比较好的展示一下。And,祝大家看世界杯愉快!



























作者:Queble

翻译:熊小熊

原文链接:https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589


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



最流畅手机UI排行榜:小米第四、华为第二、最大黑马诞生

蓝蓝设计的小编


安卓手机发展到现在,除了硬件方面受到大家关注之外,很多消费者在选择手机的时候,都会注重这款手机搭载的系统,也就是手机UI。就目前的情况来看,很多厂商的产品都有自己的特定UI,这些UI都是基于安卓系统深度打造的产品。

设计基础!不简单的设计

蓝蓝设计的小编

色彩跳跃、文字流畅、精美的设计,会不会让你有一种爱不释手的感觉呢?即使你对其中的文字内容并没有什么兴趣,有些精致的广告也能吸引住你,这就是平面设计的魅力!它能把一种概念,一种思想通过精美的构图、版式和色彩,传达给看到它的人。

重复与突变在产品设计中的应用

资深UI设计者

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

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

一、设计中的重复是什么?

在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐、统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感。

排版的四大原则:对比、对齐、亲密性、重复,重复在排版中也占据了一席之地,可见它在设计中分量是不可小觑的。

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动,格式塔原理中的对称性就是重复的一种表现方式;格式塔原理中的相似性算是重复中自带的一种突变。

1. 重复

重复是设计中最基本的形式。在同一设计中,相同的形象出现过两次或两次以上就形成了重复。

在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值;在交互层面重复的元素有位移(方向)、旋转、缩放、不透明度、相同属性交互要一致。

在产品设计的前期设计师需要输出界面设计,为了方便下游前端工程师更好的规范和适配,也要保证产品后期上线产品视觉稿的高度还原,这就要求设计师输出一整套产品的视觉和交互规范。

重复配色

在 app store 的页面中使用了相同的颜色进行提醒,方便用户快速查找和点击,整体的蓝色又给人理性的感觉,看到付费app 的好评数可以看出是因为产品好才推荐你进行理性消费。

重复大小

INS 主页第一排头像相同大小进行重复排列,与内容的人物头像有大小对比之分;INS 搜索页采用了九宫格布局,为了重复中有变化它把右边的四个方格合并成一个内容展示区域,推荐好的热门视频。

重复间距

Airbnb 界面中的间距非常规范,首页大体采用了谷歌里面的8px 原则,每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。

重复组件

(如图标注)INS 界面中用了统一组件,相同的圆角和高度规范又给画面增加了统一性和连贯性。

2. 突变

在相同的形象重复出现时,尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。

在产品设计中我们运用的突变的目的很简单就是为了让其更加突出,多用于区分当前状态、选中状态和默认状态。

banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

按钮

在登录注册页面中,我们会通过大的色块凸显登录按钮,引导用户快速登录进入到 app 里面。也减少了用户的思考过程,符合大脑的惰性。

但是在很多 windows系统中,卸载软件时会跟你玩文字游戏,会用非、否、不是等诱导你作出错误的判断。

feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页 feed流里面会把内容分为作品和文章,之前版本中的作品和文章的样式是一样的,新版本中重点是推作品,当文章出现时通过改变文章的排版进行区分,重复里面又带有变化。

3. 节奏感

多少元素排列可以形成节奏感,一般来说是3个或3个以上,两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。

左右滑动

(如图来自uistar)界面中三个书籍整齐的排列在一起,可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时,应考虑元素的数量,尽量不要超过10个以上。

列表页

(如图来自uistar)列表页面整齐的排列在一起有一定的节奏感,通过改变 icon 的配色来丰富画面。

4. 韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。

最美有物

最美有物app 的画报界面中,通过改变每个界面的大小比例有序的排列在一起,通过上下滑动可以快速浏览标题,进行查找翻阅,整个过程很流畅,整个界面有流动性和韵律感。

图表

图表在设计的时候通过不同颜色来区分不同的时间段,线条错落有致的排列增加了界面的韵律感。

配色

△ 来自Prakhar Neel Sharma和crisssamson

这两个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中,增加了画面的丰富感和韵律感。

重复在动效中如何运用才会有韵律感?

界面动效中主要分成当前状态动效变化和转场动效变化,界面中的元素a1对b1、a2对b2、a3对b3信息对等,能帮助界面做出很有韵律感的动效。

二、总结

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的,几种不同的美感可以同时存在的,只不过它适应不同人群的审美能力,审美能力高一点的更喜欢一些变化,审美能力相对基础更喜欢简单的重复。

所以画面中不断出现同样的元素这叫重复,而在很多重复里面突然出现一个变化这叫突变,相同元素整齐的排列在一起这叫节奏感,而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。

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

2018年Behance 上最值得关注的20个设计趋势...

博博

2018年Behance 上最值得关注的20个设计趋势...


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


对于2018年的设计趋势,众说纷纭。作为大型设计社区的behance终于按耐不住,多名设计师预测了2018年20大设计趋势,下面就和兴元君一起看看到底是哪些吧!

1 未来感

无论何时,我们都对未来充满了幻想与期待。更先进的显示技术、更的出行方式,那些若梦幻离的景象总是令人兴奋,未来感的塑造总会唤起人们心中对科技的无尽渴望。

2018年Behance 上最值得关注的20个设计趋势...

2 简约舒适

少即是多,这是亘古不变的真理。简约意味着简洁,以简约主义的白色为主,优化功能,强调空间感。

2018年Behance 上最值得关注的20个设计趋势...

3 深度感

为传统的平面元素增添厚度,是 2018 年的设计大势。一点阴影,赋予了元素另一个维度,为交互体验打开了一扇窗。空间造就了深度,深度成就了空间。

2018年Behance 上最值得关注的20个设计趋势...

4 响应式图标

在未来,越来越多的面向移动体验,而日渐修长的屏幕让纵横之别不容忽视。无论哪种情况,图标都必须适应新的环境。因此,响应式图标设计对设计师而言至关重要。

2018年Behance 上最值得关注的20个设计趋势...

5 插画设计

任时光奔腾如梭,但历史总是惊人相似。太长时间的同质化,让突出个性的呼声愈喊愈震。这些年尚未发力的插画,在今年一定会得到大家的关注。

2018年Behance 上最值得关注的20个设计趋势...

6 动效设计

雨木林风,荷伴涟漪。我们无时无刻都在被运动吸引,技术的不断革新,为动效的使用铺平了道路,越来越多的产品也随之使用动效。大势所趋,永不停息!

7 微交互

上下拨动,左右平移;点按有悦,长停则变。 优化体验,塑造品牌,微交互无处不在

2018年Behance 上最值得关注的20个设计趋势...

08 演示动效

这种动效只供展示,引导用户使用。特别是在启动页、空状态,演示动效能极大的激发用户使用兴趣,帮助用户完成特定操作。

2018年Behance 上最值得关注的20个设计趋势...

9 明亮渐变

扁平化大行其道多年,多少让人有些审美疲劳,渐变得以重新回归。不同以往的是,鲜艳、明亮、酷炫,是当下渐变的特点。

2018年Behance 上最值得关注的20个设计趋势...

10 三维效果

3D 始终是我们不容忽视的力量,蛰伏多年,一直在寻找爆发的良机。且在这多年的隐忍中,聚集了越来越多的力量,让本就可怕至极的力量变的愈加摧枯拉朽。

2018 年,它不一定会发力,可一旦契机出现,就会势不可挡。

11 金属质感

现实和虚拟的界限愈加模糊,较为容易 “欺骗” 视觉的金属质感重新博得设计师关注。

2018年Behance 上最值得关注的20个设计趋势...

12 上个时代的彩色图案

也许是怀旧情怀的需要,也许是那年的少年已肩扛重担。那些年在玩具和衣着上图案重新焕发出新的活力。

2018年Behance 上最值得关注的20个设计趋势...

13 傻大粗黑

这一点毋庸置疑,在较长的一段时间里它都不会被取代。更令人欣慰的是,无衬线字体也开始展露头脚,让字体的选择进入了一个新世界。

2018年Behance 上最值得关注的20个设计趋势...

14 字体设计

在一切归于冷静之后,那些精雕细琢,能彰显差异性的东西重回王者之地,字体设计也得以荣膺桂冠。

2018年Behance 上最值得关注的20个设计趋势...

15 粒子背景

沉浸体验,是所有设计师的不懈追求。不喧宾夺主突出主体,不太阿倒持取悦用户,正是粒子背景的魅力所在。

16 拆分页面

一分为二,各司其职;化繁为简,相辅相成。划分页面空间,重新定义区域,图像与文字分离,构建信息结构。信息越是爆炸,越需要化繁为简

2018年Behance 上最值得关注的20个设计趋势...

17 艳,更艳

从性冷淡到大胆用色,恍然间抛开了对过度的恐惧。越是过度,愈是讨喜,任何大胆的设计都会被称赞和鼓励。

2018年Behance 上最值得关注的20个设计趋势...

18 单色图标

色彩纷呈,渐幻若璃;界面之中,唯我独素。色彩艳丽的今天,唯有图标坚守其道。不跟风任吹,不随波逐流,这种坚持换来了舒适与愉悦

2018年Behance 上最值得关注的20个设计趋势...

19 混合图标

线与面合,白与艳合;合则一派,不合则灭。在不同风格争相出现的今天,也是一种不错的尝试。

2018年Behance 上最值得关注的20个设计趋势...

20 新造型主义

作为新造型主义的奠基人,皮特·蒙德里安曾这样说过:对自由和平衡(和谐)的渴望是人类天性。通过理想的绘画形式将宇宙真理物质化、几何化

简化,井然有序,色面完美。率真的纯粹原色相互对立与平衡,凭借两种否定,黑与白分割构图。

2018年Behance 上最值得关注的20个设计趋势...

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


日历

链接

个人资料

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

存档