实用干货!UI设计师需要了解的 APP弹窗体系

1. 弹窗的定义

弹窗分为模态弹窗和非模态弹窗两种。

△  弹窗分类

模态弹窗:很容易打断用户的操作行为,用户必须回应,否则不能进行其他操作。

非模态弹窗:不会影响用户的操作,用户可以不对其进行回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。

弹窗作用:非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

2. 弹窗的介绍

2.1 Dialog(Alerts)

△  得到、日历

Dialog需要用户对此弹框进行操作后才能继续执行其他任务。

警告框在iOS...

2017-05-19

天猫APP启动页改版

启动页改版前体验上的现状:


为什么要对启动页进行改版呢,我们来回顾下:天猫客户端启动后,首先会看到一张很有氛围的启动页,几秒钟后,又出现一张闪屏,上面有很多活动相关文案,紧接着可能会出现“超级品牌日”的首屏霸屏,然后才能进入到正常的首页。

其实刚才说到的每一张页面所想要表达的信息都是相互独立,互无关联的,给人一种信息断层的感觉。并且,用户需要接收2-3张页面的信息才能正式进入首页,这个过程就显得复杂和冗长。所以我们存在的问题就是:信息断层和过程冗长。

我们的设计目标呢,就是需要去解决以上两个问题:
信息断层:将原本完全独立的页面之间赋予关联性
过程冗长:简化进入首页的流程,在感知上更轻量化一些。...

2017-04-25

阿里妈妈app 品牌植入设计

原文转自:阿里妈妈MUX http://mux.alimama.com/posts/1486

2017-04-25

组件化设计与开发

  

 

  

  组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化,使它具备完整的局部功能,通过自由组合来构成整个产品。

  对于计算机这么复杂的工业产品,组件化是唯一能使它成为现实的方法。我中学暑假去电脑城打工,跟着别人学习电脑维修。CPU在哪里,负责什么,如何拆装;内存在哪里,负责什么,如何拆装。这些都是基础知识,各部分各司其职,什么坏了就换什么。我还见过资深维修工修主板,他真的能找出主板上哪个电容爆了,换一个相同规格的上去,电脑又能正常开机了。

  对产品设计的意义

  

  当然今天我们不讲电脑维修,组件化思维要运用到我们的工作中。首先...

2017-04-22

#用户体验# 如何在页面上减少用户操作

最近有同事在公司反馈:“有用户说xx流程、xx流程太繁琐了。”产品经理反驳:“怎么可能,我已经对标过业内很多体验很好的app,流程上的步骤我敢保证我们绝对不比别人多。” 
  作为“好事”的交互,我决定走查一下流程,看看问题出在哪里。
  产品经理没有说谎,被用户吐槽的几个流程确实一个步骤也没多余。但是呀,页面上很多本该可以让用户少操作的地方,都没有做好优化,导致一个相同的页面,用户在其他app可能输入一次或点击一下就好了,在我们app可能操作要翻倍。所以给用户留下了繁琐、难操作的印象。
  因此,我也总结了一些可以让用户少操作的...

2017-04-22

利用品牌基因法绘制图标

  图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。

  但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

  前一阵子写了一篇《利用品牌基因法进行图标设计》,但只讲了一种提取视觉基因的方法,不够全面。菜心担心大家因为方法的不全面而导致设计效果过于死板,所以近期将整个品牌基因法的体系重新梳理了一遍,增加了一些提取基因的路径,可以扩展我们的设计思维与制作方法。

  需要强调一点,文中所讲的品牌基因是指视觉上的哦!

  来看下大纲:

  1.提取特定形状

  2.吸取品牌颜色

  3.抓取风格特点

1...
2017-04-21

设计效果验证之道 — 腾讯ISUX

Hahn:设计效果检验,即针对设计师的设计方案进行数据验证,通过客观的数据来量化一部分设计方案中较为主观或存在争议的地方,以此判断设计方案的优劣,从而得出检验结论。

众所周知,每个人对设计的评判是主观的,设计效果也不容易被直接量化。所以针对设计效果的数据检验变得很有必要,它可以辅助设计决策,沉淀出优秀的设计案例,并且进一步衍化出更好的方案,同时好的设计方法论得以传承。从长远角度来看,设计价值得以彰显,设计师的说服力得到提升。

同时我们是在一家商业公司,好的设计除了为用户带来良好体验,还要体现商业价值。而商业价值可较为直观的从数据中体现,这也是设计效果检验的目的之一。

那么,如何做好设计效...

2017-04-21

优酷6.0改版,用设计诠释年轻的多元世界

  优酷6.0新版上线四周的时间里,每天一早关注用户舆情成了规律和习惯。看到大量用户的积极关注和正向反馈,此刻的心安稳了许多。作为一个如此大用户量级的应用,改版过程异常复杂而艰难。曾经为了不同侧重的方案争吵不休,陷入无头绪的迷惘得不到答案,在不断的推翻与重建中积蓄对产品的理解和诠释。也正是经历了太多的疼痛与快乐,感觉更有必要和大家分享这段项目背后的设计故事。

因何而变?

  平台化,大构想

  2016,阿里大文娱战略实施,作为用户娱乐最直接最有效的载体,优酷被赋予了更大的使命与责任。加快自身的业务与大文娱其他板块的串通互融,通过各方资源共享,达成乘法效应,成为未来优酷的发展重心。...

2017-02-21

如何将Material Design带入实际产品中

原文:http://www.ui.cn/detail/188874.html

2017-02-21

图标规范:图标转角论亲和力的差异

原文:http://www.zcool.com.cn/article/ZNDcwNTI4.html

2017-02-21

图标规范:线的属性-精致的要素

原文:http://www.zcool.com.cn/article/ZNDY2OTE2.html

2017-02-21

图标绘制规范:方寸之间皆有讲究

原文:http://www.zcool.com.cn/article/ZNDY2MTQ4.html

2017-02-21

如何构建高复用性的交互组件库

引子

有一天,当你几乎完成了一个项目全套的交互设计稿后。
PM:「那个……把底栏第二和第三个Tab对调一下位置吧。」
你吓得坐到了地上:「为什么!不是一个月前评审时就定好的吗?」
PM叹了口气,用八百字痛陈了客户的压力和他的歉意。
你哭:「有200多个页面要改,明天评审还来得及吗?」
PM没有说话,只是同情地拍了拍你的肩膀……

——而如果你的导航栏是通过组件统一搭建的,完成这一改动只需要1秒。

1 什么是组件库1.1 组件库的概念

组件库就是界面设计常用控件或元素的集合,从某种意义上说,交互设计线框图的组件库比视觉设计阶段的UI组件库价值更高。UI设计阶段,不同产品、不同项目的常用组件即使有共通...

2017-02-20

AE 动画直接变原生代码:Airbnb 发布开源动画库 Lottie

Airbnb 发布的 Lottie 是一个面向 iOS、Android 和 React Native 的开源动画库。

简单来说,就是可以直接利用 AE 导出的 JSON 动画文件,将其解析为原生代码,并跨平台运行在设备上。

根据身边朋友的试用,通过 Canvas 绘制动画非常非常流畅,并且在 AE 动画没有遮罩的前提下内存控制得也非常好,基本可以取代用 GIF 做动画。

一个 JSON 文件可以同时复用于 iOS 和 Android ,免去了动画重复开发实现,并且还原度都比较高。

唯独当 AE 动画大量使用遮罩时,内存管理似乎还有些 Bug。

名字 Lottie 好像来源于一个德...

2017-02-20

2分钟掌握参数化动效曲线

作者:信籽、鱼也


1 参数化设计的目的

大家有没有遇到过这种状况,当把设计好的动效拿去给开发同学时,总要反复调整,历经千辛万苦终于把动效还原成所设计的样子,这究竟是设计师的问题,还是开发同学的问题,后来仔细想想,这明显是我们设计师的问题——由于设计师没有提供准确的参数,开发同学只能一遍遍地对照着设计师提供的动画来调试实现的效果,这样必然导致沟通成本的增加和动效还原度的降低。

通过分析这些现象,我们提出了参数化的动效设计,希望达到以下两个目的:

1)准确的参数:让开发同学有准确的参数来实现动效,减少沟通的成本和提高动效的还原度。

2)指导作用:用准确具体...

2017-02-20

色彩如何影响 UX 和用户行为

色彩:设计得当时你可能从未关注过它 - 但是设计不得当时呢?无论是过亮且灼眼的背景,或者暗灰色背景下的黑色文字,还是以次充好的色彩选择都足以毁掉一款功能强大的 app。如同设计的其他方面,色彩不仅仅是为 app 锦上添花。色彩与用户体验的其他方面一样,也可以是一种工具。

用于设计 app 的图形 设计哲学 - 从元素尺寸,滑动方式,当然也包括色彩 - 都在影响着用户的行为。因此,设计师通常在项目前期用几个月的时间搭配色彩而不是设计布局。

选择颜色搭配的区别就在于,完美的色彩搭配能设计出一个能让用户感到放松并沉浸于此的...

2017-02-20

UI界面排版原则

转自公众号:菜心设计铺


2017-02-20

韩国最大的搜索引擎NAVER,新旧版设计对比解

NAVER是韩国最大的国民搜索引擎,也是一家基于设计为核心的互联网公司(类似还有google)。在世界五大搜索引擎中排名第5(仅次于google、雅虎、百度、bing);除了搜索外还提供其他服务和产品,例如翻译、购物、LINE等;随着用户需求和环境的变化,NAVER的产品和服务也在不断的变化,那么在多产品线交叉的情况下NAVER是如何把控用户体验的呢?

就在去年的10月,NAVER对自身的PC用户进行问卷调查,收获了很多不同的意见,具称效果显著。紧接着根据这些用户反馈,NAVER设计团队已经着手开始了NAVER PC新版的设计探索。NAVER设计团队表示“我们会尽量在不影响现有产品使用舒...

2017-02-20

UI设计师急需掌握的平面设计基础

曾看到网上一些帖子讨论UI设计师和平面设计师的差异,总结为思维方式的不同: UI设计师考虑用户习惯和易用体验,平面设计师专注于更具吸引力的信息传达。两者侧重不同但专业上有非常大的交集,信息传达的核心基础技能其实都是相通的。平面设计是如何表达一个事物,而UI设计是如何让用户更好使用一个事物,表达层面令人费解则卡在了使用的第一步。UI论坛有人吐槽:“不要用平面设计思维做UI”,然而许多UI设计师往往缺少平面设计最基本的意识。

常见的平面设计基础问题

平面设计的基础设计理论包括: 色彩构成、平面构成、字体设计、图案设计、版式设计等。平面设计基础能力可以概括为视觉化处理与传达信息的能力。UI

2017-02-20

腾讯游戏应用中心品牌更新

1. 品牌概述  Brand Overview

游戏应用中心是QQ空间用户专属的游戏平台,最新、最火、最好玩的游戏一网打尽:角色扮演、模拟经营、射击、棋牌、街机、赛车等各类游戏应有尽有。这里网罗了全平台最全、最给力的游戏礼包,更有积分兑换频道、各类精彩活动为玩家提供丰富给力的奖品。 

Game&App Center is an exclusive gaming platform for Qzone users including the latest and hottest games such as role playing, simulation,

2017-02-20

星咖闪动—闪咖品牌设计

1. 品牌概述 Brand Overview

闪咖是一款由腾讯公司出品的年轻人短视频社区应用,主打音乐秀、对口型、表演等功能,视频配上酷炫动效、实时美颜、加速录制等效果,瞬间逼格满满。闪咖还汇聚了一大批好玩有趣的网红达人,搞笑帅哥、呆萌萝莉、性感女神,应有尽有!

 


2. 品牌设计概念 Brand Concept

闪咖是个超炫酷短视频社区,为突出业务,标志设计使用视频、皇冠、闪光三个元素。这三个元素结合,传达了闪咖录制的视频,就像王者一样闪耀夺目的寓意。


3. 品牌标志...
2017-02-20

QQ国际版视觉探索

项目背景

QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性。基于这个问题,我们开启这次探索之旅。

现有版本的视觉问题:

1.现有的视觉形象是否符合产品气质,在用户使用的过程中,是否能够留下深刻印象。

2.对于信息层级关系的处理,页面中元素的比例分布是否合理。

3.设计细节的优化,例如分割线的处理、灰色的运用、图标的形体等,都有提升的空间。

产品的认知与定位 

1. 产品定位

通过用户调研的反馈,人们对国际版的使用印象主要集中在功能少、无广告、操作便捷、翻...

2017-02-20

腾讯超全干货!如何让你的动画更自然?

1. 为什么需要探究更自然的动画

自css animation推出后,强大的功能使得我们通过css也能制作出媲美flash的动画效果。然而在制作动画的时候,我们也许会常常纠结怎么设置timing-function。一般情况下,我们会直接使用自带的五个动画函数(linear、ease、ease-in、ease-out、ease-in-out),或是在cubic-bezier.com创建一些自定义的动画函数(cubic-bezier(n,n,n,n))。但往往这一切都只是局限于使用,而不知道其原理究竟是什么,以及没有背后的物理原理支撑,使得做出来的动画可能会变得有点形而上学。例如用ease...

2017-02-20

常见的UI文案设计误区(转)

在UI设计中,文字内容的表述也是需要设计师精心推敲,仔细设计的部分。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同用户建立信任。

文案设计上的技巧很多,应当规避的误区也不少,今天为你总结16个常见的UI文案设计的误区,帮助大家少走弯路。

1、尽量避免使用俗语和术语

未知的术语和俗语将会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇,使用常用和易于理解的词汇能够帮助用户理解。

下面就是一个典型的反例:


很难说清这种错误提示信息是给系统管理员还是办公室的文员看的。

2、避免使用包含大量细节的长句

在绝大多数的交互场景之下,都无需界面描述出全部的细节。用户...

2016-10-31

吉祥物怎么设计?来看腾讯设计师的思考经验总结!

一,初步提取一些关键文字

· 8个年头( 陪伴时间长)

· 沉淀50万篇文章 (沉淀海量知识)

· 承载数以万计的活动与投票,工作生活必不可少(承载许多沟通,联系,表达的使命)

再从基本品牌吉祥物中提出一些通用点包括:

· 可爱(让人容易接受喜爱)

· 方便延展(一旦做出吉祥物,后续有许多地方都需要用到延展,所以设计造型要考虑方便延展性)

· 容易记忆(一眼就能有印象)

同时我也觉得KM是一个让我这样的新人可以快速了解公司,融...

2016-10-31

一百种方法教你撩出满意的BANNER

写这篇文章的意义在于,很多人表示不知道如何动手开始做一个Banner,拿到需求脑袋里是懵的,那么归根结底还是看的太少做的太少了,所以今天我就给大家总结梳理一下我们目前市面上的Banner有哪些品种(表现形式和手法)好了,因为在我看来,电商设计师是应该要保持一个比较宽的可超控阈值的,就比如说你要能既做的了小清新也做的了重口味,玩得起高冷大牌也受的了特价清仓大甩卖。

所以我们这次文章分享的主题就是:“解锁新姿势,我有一百种方法教你撩出满意的Banner!~”

开始这个话题之前呢,我先给大家列个提纲:

1、目前主流的Banner 表现形式有哪些?

2、如何在实际需求中运用这些Banner ...

2016-10-16

用一个文本框,让你学到交互设计师的逻辑思考方法

文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

先来做个设计需求吧!

这个设计需求是:我们需要用户填写活动的名称。

第一反应,这个是用来收集信息的,需要用户填写内容,并提交给系统,应该使用文本框

然后大笔一挥,设计如下图:


这样就完成了吗?这个设计能交附程序猿开发了吗?答案显示是:NO。

如何全面地思考?

1. 了解需求背景

首先我们需要了解这个需求的背景,多问几个问题。

  • 为什么要让用户填写?这个...

2016-09-27
1 / 14

© Lee-style | Powered by LOFTER