大神UI弹窗设计经验总结

时间:2019-05-12 05:36:05下载本文作者:会员上传
简介:写写帮文库小编为你整理了多篇相关的《大神UI弹窗设计经验总结》,但愿对你工作学习有帮助,当然你在写写帮文库还可以找到更多《大神UI弹窗设计经验总结》。

第一篇:大神UI弹窗设计经验总结

创想设计学院

官网:http://www.xiexiebang.com/ 大神UI弹窗设计经验总结

当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时,弹窗却会困扰你的用户。学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰。

加上这篇《腾讯设计师做了100个弹框后总结的设计经验》 学会弹窗设计就没问题了!1,什么是弹窗?

弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息,要求用户去做决定,抑或是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中,它可以在不把用户从当前页面带走的情况下,指引用户去完成一个特定的操作。

UI设计

图1,会话过期弹窗

现在让我们来看看有哪些优秀的弹窗设计和使用方法。

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 原则1,减少干扰

由于弹窗会中断操作,要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务,并转而专注于弹窗中的内容。在继续之前,用户必须要面对这个弹窗,否则将无法对弹窗之下的页面进行操作。当这个用户必须要确认一个关键的操作时,这就是好的,但是在大部分情况下弹窗是不太有必要的,甚至会引起用户反感。需要确认

在你需要用户去互动才可继续时,或当犯一个错误的成本会很高时,使用弹窗是最合适且最合理的。

UI设计

图2,这里告知了用户一个情况,需要用户确认 不要突然打开弹窗

在用户没有做任何操作时突然打开弹窗,是非常糟糕的设计。许多网站用订阅框来轰炸它们的用户,就如下面的例子:

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/

UI设计

图3,诸如此类的弹窗给没有键盘的用户造成了数不清的麻烦

弹窗的出现应该永远基于用户的某个操作。这个操作也许是点击了一个按钮,也许是进入了一个链接,也可能是选择了某个选项。小结

不是每个选择、设置、或细节都有必要中断用户当前的操作。

弹窗的备选方案有菜单以及同框内的扩展,这两种控件都可以保持当前页面的延续。可不要突然跳出弹窗,应该让用户对弹窗的每次出现都有心理预期。原则2,弹窗应与现实世界相关连

弹窗应该使用用户的语言(用户熟悉的文字,短语和概念),而不是一些系统特有的专有名词。表述清晰的问题和选项   

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 在弹窗的内容区域,应该使用一个表述清晰的问题或陈述,例如“清除您的存档?”或“删除您的账户?”总之,应该避免使用含有歉意的、模凌两可的、或者是反问式的语气,如“警告!”“你确定吗?”

UI设计

图4,左边的弹窗提出了一个很模凌两可的问题,并且这个操作可能影响的范围并不明确;右边的弹窗提出的问题相当明确,它解释了此次操作对用户的影响,并且提供了指向清晰的选项。尽可能不要给用户提供可能产生混淆的选项,而应该使用那些文意清晰的选项。大部分情况下,用户应该能够只通过弹窗的标题和按钮,就了解他们有哪些选项。

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 反例:这个按钮的文字“不”的确回答了弹窗内的问题,但是并没有直接告诉用户点击后会发生什么。

UI设计

图5,安卓的系统弹窗

改成这样:肯定的操作文字“放弃” 很明确地指示了选择这个选项的后果。

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/

图6,安卓的系统弹窗 提供重要的信息

一个弹窗不应该把对用户有用的信息说得含糊不清。举个例子,如果一个弹窗要让用户确认删除某些条目,就应该把这些条目都列出来。

UI设计

图7,这个弹窗很简要地指明了这个操作的结果

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 另外,避免使用“了解更多”按钮去连接到帮助文档;在弹窗同一页面展开则是更好的选择。如果还需要显示更多的信息,则将其放在进入弹窗之前的页面。提出有(关键)信息的反馈

当一个流程结束时,记得显示一条提示信息(或视觉反馈),让用户知道自己已经完成了所有必要的步骤。

UI设计

图8,在完成一个操作后成功的例子 小结

在弹窗中使用语意清晰的问题和选项。设计促进操作完成的弹窗。

在操作完成后,提示用户操作已经完成了。原则3,讲求极简   

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 别试着把太多东西挤在一个弹窗内。要保持干净和简约(遵从KISS原则)。然而极简主义并不意味着被局限住,你提供的所有信息都该是有价值并且与之相关的。元素与选项的数量

弹窗绝不应该只是部分显示在屏幕上。因此不要使用有滚动控件的弹窗。

反例:巴克莱银行的付款处理弹窗包括了许多的选项和元素,部分的选项只有滚动后才能看到(特别是对于屏幕通常较小的移动设备)

好的例子:Stripe使用了一个简单并且聪明的弹窗,只显示了最基本的信息,这样不管在桌面端上还是移动屏幕上看起来都会很不错。

创想设计学院

官网:http://www.xiexiebang.com/

官网:http://www.xiexiebang.com/

UI设计

操作的数量

弹窗不该提供超过两种选项。第三个选项,例如下图的“了解更多”,有可能会将用户带离此弹窗,如此用户将没有办法完成当前的任务。

图11,“LEARN MORE”操作将用户从这个弹窗指引到其它页面,进而把当前的弹窗置入一个不确定的状态

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 勿将多个步骤放置在一个弹窗内

把一个复杂的任务分解成多个步骤是一个极好的想法。然而这也会给用户传达一个信号,这个任务太复杂了,以至于根本没法再一个弹窗界面中完成。

如果一个交互行为复杂到需要多个步骤才能完成(如下图的UI设计例子),那么它就有必要单独使用一个页面(而不是作为弹窗存在)。

创想设计学院

官网:http://www.xiexiebang.com/

官网:http://www.xiexiebang.com/

UI设计

图13,有多个步骤的弹窗 小结

如果你发现你在很努力地把许多元素挤进一个弹窗,这通常代表弹窗已经不是最优的设计方案了。

  

将那些不必要的、不能够帮助用户完成任务的元素或内容从弹窗中去除,以达到简化的目的。尽量避免在弹窗内安置多个步骤。原则4,选择适当的弹窗种类

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/ 弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗,强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中: 当不需要上下文就可以决定怎么做的时候。

需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时,它并不会关闭。当我们不允许此用户的进程处于部分完成状态(即用户必须完成此进程才可做其他任何的操作)。

第二大类则是非模态弹窗,它允许用户通过点击或轻触周围就可关闭。

第一种模式弹窗只在特别重要的交互操作时才须使用,(比如:删除帐户,同意协议)。  

UI设计

图14,模态弹窗:用户必须输入“DELETE”才能确认删除

另外移动系统的弹窗通常是模态的,并且含有如下的基本元素:内容,操作,和标题。

创想设计学院

官网:http://www.xiexiebang.com/ 创想设计学院

官网:http://www.xiexiebang.com/

图15,安卓模态弹窗 原则5,视觉一致性 弹窗下的背景

当打开一个弹窗时,后面的页面一定要稍微地变暗。它有两个功能,第一它把用户的注意力转移到了浮层上,第二它让用户知道后面的这个页面是不再可用的。

创想设计学院

官网:http://www.xiexiebang.com/

官网:http://www.xiexiebang.com/

图16,安卓的模态弹窗

在调节背景深度时要注意了。如果你把它变得太暗,用户就没法看清背景的内容。如果你调得太浅,用户可能会认为这个页面仍然可操作,并且甚至不会注意到弹窗的存在。清晰的关闭选项

在弹窗的右上角应该有一个关闭的选项。许多弹窗会在右上角有一个“x”的按钮,方便用户关闭窗口。然而,这个“x”按钮对于一般的用户而言并不是一个显而易见的退出通道。这是由于“x”按钮通常较小,它需要用户准确地定位到该处,才能够成功的退出,而这一过程通常很费事。

创想设计学院

官网:http://www.xiexiebang.com/

官网:http://www.xiexiebang.com/ 因而让用户通过点击非模态弹窗的背景区域去退出,就是一个更好的方法。

图17,TWITTER同时使用了点击X按钮和点击背景区域的退出方式 避免在弹窗内启动弹窗

应该避免在弹窗内再启动附加的小弹窗,这是因为此举会加深用户所感知到的网站或app的层级深度,从而增大了视觉的复杂性。

图18,反例:弹窗中的弹窗

创想设计学院

官网:http://www.xiexiebang.com/

官网:http://www.xiexiebang.com/ 小结

在大部分情景下,都允许用户通过点击或轻触来关闭弹窗(除了模态弹窗)。应该避免在弹窗内再启动附加的小弹窗(即弹窗中的弹窗)。总结

希望这些有关弹窗的使用案例和使用方法还算有趣,并能在你们设计原型时派上用场。要记住,用户体验是为用户而做的设计,而非为技术。要想知道什么样的设计最适合你的用户、最适合他们将进行的任务,其实不是一件难事:你只需要模仿那些领先产品的弹窗,然后找到你的用户做一些相关的测试  

创想设计学院

官网:http://www.xiexiebang.com/

第二篇:韩语学习和TOPIK六级大神经验总结

韩语学习和TOPIK六级大神经验总结

做个学习韩国语的小结,方法什么的不敢说都是对的,只是希望正在学韩语的大家能从字里行间找到一点适合自己的小技巧,提高韩语学习的效率。咱也算为在韩中国留学生韩国语整体水平的提高,作出了自己小小的贡献。

先说我们来韩国学韩语。在语学堂学习,主要的目的是两个。

第一,是为了过TOPIK三级四级,达到学校对于毕业生的语言要求,以期顺利毕业;第二,是希望用自己的语言能力,学好专业课程。

所以说并不需要韩语达到一个无人能及的水平。也就是说学习韩语的时候,最好不要因为目标太高给自己太多的压力,有时候压力大了,反而降低学习的效率。还有一个提高学习效率的方法,就是要爱上韩语,把学习韩语培养成自己的兴趣,这样即便是你在学习压力导致惰性滋生的时候,也能因为自己对韩语的喜爱,不知不觉中学到更多。

可能有一部分人不知道,考TOPIK和学习韩语其实是两个不一样的概念。很多人以为只要提高韩语能力就能顺利过TOPIK,但事实上我们身边有些口语很牛的人,考试下来4级都难过。因为TOPIK中的很多考试内容,并不是日常生活中能直接接触的内容。所以如果你学习韩语的目的仅仅是为了得到一张TOPIK的证书,那就以做真题为主,以上课和与韩国人的交流对话为辅。大部分时间花在练习真题上就好了。

韩语是一门入门难,越学越简单的科目。说他入门难,是因为入门学习的时候,练习发音很重要。我们就是这样一个例子,韩语入门的时候是在中国学得,本来学习就不认真,再加上启蒙老师是一个中国的朝鲜族老师,发音习惯和韩国人有很大的区别,就直接导致了自己的“半调子”发音。所以韩语学习的过程应该是,初级的时候,全程有老师陪同,中级的时候,一半时间自学,一半时间上课 到了高级的时候基本就是自学为主了,有时间就去上韩国语课,可能有人专业课太多,没时间选韩语课的时候,只要自己把自学的时间安排到位,不上也无妨。

<中 级> 3,4级的时候,一定要认真学习韩国语教育院提供的学习教材。大部分同学都是为了准备TOPIK考试,这种情况下,选择首尔大的教材很好,因为这个系列的教材里面的语法列的很清楚很到位(据说TOPIK的试题也是根据首尔大的教材编的),另外的例如庆熙大的教材,因为比较注重口语交流,教材里面是没有一个清楚的语法列表的,比较适合侧重于会话学习的学生。找一个适合自己的教材。跟着教育院老师的学习节奏,上课认真做笔记,预习复习的工作认真做到位,学完中级,一个学期是能到4级的。老师们都是对外韩语专业的专家,跟着她们的步伐,肯定没有错的。

真真切切想提高韩语能力,不光是课堂,课外也多结实韩国朋友,或者去教会,真正走出学校,在解决各种问题的过程中,特别能锻炼一个人的韩语水平。平时闲着了,或者学习很累了,想休息一会儿,就可以看看电视,综艺节目、电影,不光学韩语,也能学到当地人不少生活习惯和文化背景。

有条件还可以住到韩国人家里去体验体验他们的日常生活,没这条件的,平时多参加MT的课程,多和韩国人打交道,这些都是提高韩国语能力的重要途径。一定要入乡随俗,尊重他们的文化。

<高 级> 高级,是一个以中级为基础进阶的学习过程。想要学好高级就一定要认真巩固好中级。高级里面的语法不是很多,乍一看很难,其实有很大一部分都是能在中级里面找到对应的意思相近的中级语法的。

中级侧重语法 高级侧重单词,学习高级就一定要有很大的词汇量。而对于学习韩国语的中国人来说这就是个优势,因为高级里好大一部分是汉字词,也就是跟中文词相对应的韩语,学起来因为特别形象,所以很容易,这就是为什么有人说“高级学起来比中级容易”的原因了。就算是要背很多词,也不推荐拿本词汇书直接背,就跟学英语一样,背单词最好的方法是结合文章或者句子背诵。单独拿个词汇书,背是能背,只是效率太低了。高级里面有这么几种词,一种是拟声词,一种是成语,特别头疼。成语还好,不少跟中国成语很相像,容易记,拟声词是韩语里的特有词汇,要掌握就要下很多功夫,结合情景反复背,会看到曙光的。学习高级韩语时,想要锻炼实实在在的韩语能力,就更加应该和韩国人多沟通了,时间长了,说的就像韩国人了。但是要到这程度,可不是呆个一两年就能到的水平,我们也在努力中。

前面说过做真题最重要,而对于真题的训练方法,主要是考试之前的一个月的时候要去下真题,是在TOPIK官网→

http://www.topik.go.kr/jsp/hp/main/ 左下角的,点进去,里面有历届的真题题目,把它们下载下来,在电脑上做也好,打印下来做也好。

因为TOPIK历史上有一次改革,改革大概发生在第10届考完,第10届以及之前考试的3、4、5、6级一级一级都是分开的,11届开始3、4级并列成了中级,5、6级并列成了高级,所以建议把从11届到最近的26届真题合订在一起成为一本书。这样既不用忍受用电脑长时间看题目时导致的头晕目眩以至注意力不集中,也能随时随地把真题书拿出来翻看学习,一举两得。关于前十届的真题,题目相对有点难,但是如果感兴趣,也可以做做,练练手。

做真题的方法也很重要。最好不要去借别人已经做过的涂过划过的题目,那样做题目的思维容易受到别人的牵扯。最好是把自己打印的新题目,先尝试着做一遍。做第一遍的时候也要严格按照TOPIK考场的时间。例如语法词汇和写作两部分结合起来的第一卷是限时90分钟的,那做的时候也要限定时间,一方面能督促自己提高做题速度,另一方面能通过每一套试卷做下来的结果确定自己每一部分所需要的做题时间,以方便在考场上判断自己是不是哪一道题目花时间过多,是不是应该跳过。休息半个小时,接着做听力和阅读,听力的时候,把mp3放在自己的手机里面,不光是做题目的时候方便听,另外自己平时闲的无聊,放放真题听力,也不比听流行音乐差,还能提高听力水平,何乐而不为。

第二卷也一样,设置好时间,能做多少就做多少。这样第一遍做完了,用红笔对好答案,算分可以方便自己看每一套试卷做下来分数提高的情况。用红笔把错题重重的标示出来,便于自己发现薄弱的环节,可能是粗心没看好题目,也有可能真的不会,这种情况下,可以请教教育院的老师,他们会细心解答的。

第一遍做完了之后,把做题目的过程中看到的生词以及重要的语法知识点,可以集中起来抄在自己准备的笔记本上,方便有空的时候拿出来背诵,最好每天早上大脑最清醒的时候背抄下来的生词,学习语言的精髓就是“重复”,其他没什么。艾宾浩斯的理论是一样东西在不同的环境里面记忆7次就能达到永久记忆,一辈子都忘不掉,觉得这样过于繁琐也不用背这么多遍,重复背个两三遍,以后题目中再出现的话稍微记一记就好了。整理结束之后,就接着做下一套试卷,有时间就全部做完。

中级阶段,语法最重要,这就是之前为什么强调认真学习首尔大教材的原因,只要把语法都理解透了,加上整理过的单词,做题目也是越来越得心应手,做得越来越快。到最后的效果是做题目基本上通篇文章根本看不到生词了。

做完了第一遍不能就这么扔了,单词语法多看看,听力部分的听力材料也要多听几遍,看看自己当初做错的题目是不是真的应该错,自己哪一部分没有听清楚,这部分没听清楚的内容要着重反复听。题目闲着没事多做几遍,温故知新。

到考试的前几天就不用做题目的,只要把之前红笔改过的做错的题目,前后翻阅几遍就行了。

关于在考场上,很多人会喊:阅读做不完怎么办?只要是题目做多了,加上你本来的反应速度不差,阅读都是可以做完的。不过话又说回来,能都做完的人毕竟是小部分,其实只要是自己能保证做完的题目的正确率,做不完的题目随便蒙蒙,也是能考到高分的。语法词汇这部分都是死的,会就是会,不会就是不会,在于平时积累和学习态度。这一部分用20~25分钟甚至更短的时间做完,才能保证后面写作文时间的充足。写作前面的10来道选择题其实就是变相的会话。做多了会发现很多题目,虽然提干的内容,说话的环境不一样,但是考的知识点就那么几个。然后作文前面的句子连接,只要根据情况套用连接词,是没有绝对的标准答案的,只要是符合句意,都会判对。句子连接下面的短文句子填空,感觉是整个考试最难的部分,高级可能不是这样,但是中级绝大部分题目的答案,都是从文本中能直接找出稍微经过一点变换写出来的,没有十全的把握,最好不要自己臆断答案。高级的要求偏高,需要应试者具备很强的概括能力了,而概括能力也是自己平时阅读的过程中练出来的。

作文让无数人头疼,最好的方法是自己在上课期间,晚上闲暇的时候就练练笔,根据老师给的题目,或者自己在真题中找的作文题目,当天写完,第二天交给老师,让他们修改,就能发现自己在单词语法使用上存在的问题,每改好一篇,都要反复看多遍,这样长期写下来进步绝对是惊人的。到了考试之前的一点时间感觉作文实在不行,就把真题答案上的作文范文背个几篇,总归能用到。听力主要是考试节奏的问题了,考试的过程中,不能因为某道题目很难就犹豫不觉,一定要在播放下一段录音的间隙拿定主意,哪怕就是瞎蒙一个,也不能影响下一道题目。

TOPIK要稍微拼点速度,其实也就是做题目的熟练度。所有考试都这样,熟能生巧。考试千万不能给自己“不会过”的消极心理暗示,我就是因为这个吃过很多亏,一定要乐观,尽自己的力量,认真把试卷完成。

<有关得失的博弈> 考试这嘛事,在准备和临考的时候都应该有战术和对策。所谓战术就是在短时间内能取得最理想的效果。那就是在准备阶段就想好了,哪些部分是最好拿分的,上面提及了是尽是汉字词的题目最适合中国学生拿分,而其他那些拟声词的题目(高级的语法第三或者第四题)以及一词多义(高级语法第十七十八题),要投入大量时间而效果反而不一定好。那复习的战略就是,放弃这些。

相对的,考试的时候,对策就是随便撞撞运气不纠结于这些题目。同样的时间如果花在在其他的地方,容易融会贯通的地方,往往是事半功倍。同样的,高级的阅读中,每次都有一篇小说一般的文学作品,给我们的感觉就如老舍的文体,想要准备或者临场拿分,代价都是很大的,还不如直接跳过。当然每个人擅长的,或者每个人的想法都不同,关键是要抽出几分钟时间去想想自己擅长什么,该放弃什么,这样才能更高效。

拿破仑威尔有一本书叫《成功学》中间有17项原则,前两项就是保持乐观的心态和比别人付出更多的努力。TOPIK和韩国语的学习是一个艰辛的历程,但是语言就是这样,只要付出努力是一定有成果的。只要大家时刻保持乐观的心态,比以前更加努力,有句话叫“手比头高”,自己真正去实践过了,拼搏过了,就一定能有不凡的成果。

第三篇:弹窗设计常见的四种交互情况

http://www.xiexiebang.com/

弹窗设计常见的四种交互情况

弹窗经常在哪些情况下使用?设计上需要注意什么?

弹窗,顾名思义,是指弹出的窗口,强调一个弹字。无论是在web端还是在移动端,弹窗都是一种十分常见的一种交互方式,经常被用于以下四种情况:

1、广告投放

2、用于系统提示、通知、警告类的消息弹窗。

3、用户引导

4、显示加载

接下来我们来逐个分析一下这四种情况:

1、广告投放

作为网站的最重要的盈利方式,广告弹窗被广泛使用,但恐怕也是大家最讨厌的一种广告形式了。相信大家都有过类似经历,在家里打开一个网页,你还没反应过来,里面就传出了奇怪的呻吟声或者是打斗的声音,如果父母正好也在,简直超级心虚好嘛,但明明我就是看篇小说而已!而且这些弹窗的暗黑模式要不要那么心机啊,我急急忙点击了关闭,为什么直接进入了,而且声音更大了,这个时候已经是尴尬癌晚期了„

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

这样的弹窗广告无疑是有悖于用户体验的,那为什么在如此重视用户体验的互联网氛围内,弹窗广告依旧坚挺呢?这就要看网站所属公司的盈利模式了,比如我大学时候很喜欢看小说,但学生嘛没钱,总会去看一些盗版小说,这些小说都是免费的,那网站靠什么盈利呢?就是广告投放,而且这些网站一般也没什么优秀设计师,所以广告们奔放外露,粗暴野蛮,毫不含蓄。这也是特定的环境造成的。

当然作为一个设计师,我们站在公司盈利的角度下,如何设计优雅的弹窗广告,在降低用户厌恶感的同时,提升广告效果,又为公司赚取利益,是我们应该思考的。

比如:

1、绝对不要声音。这点说一个弹窗之外的视频体验,相信大家都发现了,现在点开手机上的腾讯新闻,视频播放默认是关闭声音的。终于可以在上班时间偷看视频新闻不被发现啦!

2、关闭按钮位置明显,能迅速关闭。对广告里的产品有兴趣的用户自然会点开,没有兴趣的用户你强制进入只会增加用户的反感。

3、精准投放广告,让用户看到他想看到的。

如果你想要一种更有设计感的方式,那你可以参考一下知乎上了脚喵说的回答: 我觉得可以用“反向弹窗”,就是刚打开页面的半秒钟之内存在广告,且画面吸引人,在人看清楚之前就收缩到页面边缘变成类似书签的很薄的东西(收缩时最好有动感,比如加速运动等),感觉是被“吓跑”一样,留下干干净净的页面,并让人出于好奇主动用鼠标去点击(不是悬停)那些被收缩的小广告。虽然也是广告,但实际广告效果肯定比弹窗要好。

小结:广告弹窗作为网站盈利的重要模式,是无法杜绝的。设计师需要在商业利益和用户体验上寻找平衡。

2、用于系统提示、通知、警告类的消息弹窗(也称弹框)

提示确认弹框

提示确认弹框是在用户需要的时候呼出,也用来防止用户误操作。看似简单的提示弹框又有哪些需要注意的点呢?

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

上图是淘宝购物车中删除商品时的确认弹窗,元素很简单,文字+确认、取消button+关闭icon,文字部分主观性较强,就不做探讨了。我们主要针对确认、取消button和关闭icon来做三个方面的探讨:

1、确定button放在左边还是右边?

2、确认需要给出指示态hover吗?(将“确认”改变或填充颜色,突出“确认”这个操作来引导用户点击)

3、关闭icon是否必须

为了解开这三个问题,我们先来对比一下Mac和windoes的系统弹框

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

上图是UI中国删除评论时的提示确认弹框,一般这种情况纯属开发人员偷懒,直接调用了系统弹框。而对比Mac和windows的弹框,会发现有两个不同点,一是Mac的确认button在右,而Windows的确认button在左,关于这一点,从用户习惯看来,设计师应该遵从用户比例高达95%的Windows系统习惯来设计,即将确认button放在左边。二是Mac提示框右上角没有关闭icon,这就不是不同平台上用户习惯不同的问题了,更关系到是否强制让用户做出选择。如果没有关闭icon,新手用户必须阅读文字之后再作出一个选择,但如果用户只是无意点开了呢,也必须让用户阅读后再做出选择吗?显然是违背用户体验的。

因此在PC端关于上面三个问题的探讨,答案是: 1.确定button放在左边还是右边?左边 2.确认需要给出指示态吗?(hove态)需要

3.关闭icon是否必须。通常要有,但如果必须要让用户阅读后做出选择,则可以没有。当然,PC端的一些体验,到了移动端就有所不同了,由于界面以及手指触摸面积的限制,手指移动去点击关闭icon显然不如直接选择来的简单便捷。

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

确认和取消的位置在移动端如果确认呢?看上图的例子,IOS系统中朋友圈中的删除是删除后不可恢复的,因此删除放在单手操作不那么容易触达的左边比较合适,而淘宝网删除订单是可以恢复的,因此确认放在右边比较合适。在我看来,虽然移动端普遍遵从IOS规范,但其实确认放在左边或者右边区别并不大,但每个设计师都可以有自己的规范。

而至于是否要有指示hover态,要根据情况来定了,如果是希望引导用户进入下一步操作的,比如希望用户点击确认,那么就将“确认”两个字改变颜色突出出来,以方便用户点击。但如果是希望用户自己选择,则不用给出指示hover态。

因此在移动端的答案是:

1、确定button放在左边还是右边?区别不大,但在我看来,需要根据操作是否谨慎来定,比较谨慎的操作放在左侧来防止误操作,相对随意的操纵则放在右侧比较符合用户的心理模型

2、确认需要给出指示hover态吗?需要用户自己决定的操作,不需要给出指示。

3、关闭icon是否必须。不需要关闭icon

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

好评提示

有的APP进去之后就会弹出提示让你好评,可是我浏览页面正high呢,一下子弹出来这个来打扰我,如果我当时心情不错,我可能会选择下次再说或者不再提示,但如果心情不好,我就好想进去给他个差评啊,但是进入APP Store又要连要一会儿,干脆就放弃了。

上图是豆果美食的评价弹框,在我注册的关键时刻给我一个评价弹框,就好像我去你家做客,我还没进门呢,你就问我这次招待的怎么样?这个时间点把握的是非常不合理的。

关于提示评价的弹框,我觉设计师要注意两点:

1、在合适的时候给出提示评价的弹框、至少也要是用户使用了一段时间之后,避免在用户刚刚使用,或者正在注册的时候提示评价。

2、要给出下次再说或者不再提示的选项,如果强制性的让用户评价,即使用户想给好评,AppStore也不给力呀,要等那么久才能连接上,挑战用户耐心的结果可能是:用户本来对APP还是有好感的,结果把对AppStore连接慢的差评一起给你。

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

通知类弹框

最常见的就是新闻推送了,例如腾讯新闻的通知弹框会把一些热点事件通知给你,你可以选择现在就看,也可以选择暂时不看,这类通知弹窗最重要的也是需要根据用户浏览新闻的习惯和爱好进行通知,有一句话特别形象,你爱的人吻你,那是爱情;你不爱的人吻你,那就是流氓。还有插一句我对体育新闻真的没有兴趣,腾讯下次不要给我推了。

2、警告类的弹窗

网站杀毒软件检测到威胁的消息弹窗,一般都是被用户喜欢的,因为这些给用户提供了很多消息,帮助用户全面了解更多信息做正确的决策。但是如果频繁出现威胁消息,也容易引发用户内心恐慌与不安。度要把握好,同时形式也很重要。

3、引导性的弹窗

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

用户经常需要一些引导,比如在玩游戏的过程中,弹窗告诉你该怎么玩,这种引导在用户需要的时候适时出现,不但不会引起用户反感,还会帮助用户,提升用户好感度

引导性弹窗也常见于产品业务需要而出现,比如游戏中的注册,领取礼物、购买道具等,这是良性的运营推广和商业利益的获取,但是在什么环节,弹出什么功能,哪个时间点上适度出现是设计师需要考虑的。用户并非都忽略弹窗或者看见付费就关闭,点开后能否继续吸引用户、帮助用户才是最重要的。

4、显示加载进程的弹窗

北京千锋互联科技有限公司 版权所有

http://www.xiexiebang.com/

缓解了用户在等待过程中的焦虑感。如果能加上生动有趣的动画,还能在加载的过程中提升用户好感度。

总结:弹窗作为在页面中弹出来的框,自带打扰用户的属性,这个属性是一把双刃剑,如果设计师运用得当,在合适的时机弹出用户需要的弹窗,将会给产品带来良好的用户体验,即使是暗黑模式,也能降低用户的反感。

相信我们通过不断的深度思考,能在商业利益和用户体验上找到平衡点。

北京千锋互联科技有限公司 版权所有

第四篇:《UI设计》课程标准

《UI设计》学习领域课程标准

执笔:甄珍

审核:

时间: 2013-5-

5一、学习领域定位

“UI”热是近几年来兴起的潮流,近几年国内很多从事手机,软件,网站,增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计的公司也应运而生。

正是鉴于目前UI行业的发展状况,本专业第一次开设计《UI设计》课程。

《UI设计》是所有与网络通信软件相关专业课程,该课程既可以巩固前期所学的设计基础理论知识和设计软件应用知识,还重在给学生开拓新的专业知识面,认知一个新的设计领域,从而拓展职业能力和就业选择面。

二、职业分析

目前UI即用户界面设计行业刚刚在全球软件业兴起,属于高新技术设计产业,与国外在同步发展水平。其次国内外众多大型IT企业(例如:百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门,但专业人才稀缺,人才资源争夺激烈。但目前全国UI设计专业的系统教学极其稀少。UI设计师的待遇和地位也逐渐上升。

三、学习目标

知识目标:使学生能熟悉UI设计的流程和设计方法,并能使用制作有创意的,充满视觉冲击力的UI设计作品。

技能目标:使学生学会系统规划和全局思维,能够完成一整套UI系统的设计。

素养目标:使学生具备能从事UI系统的开发与设计能力,培养学生团队合作、及独立思考能力。

四、学习内容

四、学习领域课程设计思路

(一)设计理念

五、考核方式

学生成绩的评定,以学生平时表现和任务完成情况及最终考核来核定。评分细则如下表:

其中,平时成绩包括平时上课的表现和各任务的完成情况,占总成绩的30%;最终考核成绩所用考核方式为机试,占总成绩的70%。

第五篇:UI设计流程

UI设计流程

阶段一:分析

1用户需求分析 2用户交互场景分析 3竞争产品分析

这两者可以说是相辅相成的。对于一个较为正规的项目而言,必然有对用户需求的分析内容。Tanjurd瑭锦资深UI设计师表示其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话,那么用户UI需求就是本次设计的出发是好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察,但是UI设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。

阶段二 设计需求:(叶面设计前需提给UI页面组)

1.系统设计需求文档。2.系统结构文档(例如栏目划分,目录结构,导航方式等)。3.较复杂页面表现形式草图(手绘或相关软件绘制)。4.较复杂业务流程文档。5.如有可能提供参考和示例站点。6.与程序员沟通部分页面实现方法。

段三:页面制作:

1.经过确认的美术设计的方案图7.系统设计需求文档等,较复杂务流程文档。2.所需页面脚本需求,与程序员沟通部分页面实现方法。3提交给程序

用户交互case图(说明用户和系统之间的联系)用户交互流程图(说明交互和事件之间的联系)交互功能设计图(说明功能和交互的对应关系)最终得到UI的设计产品。

阶段四:验证

界面测试:(页面组提交给测试组包括:1.经确认的设计方案图。2.静态模板页面。以上二项均为便于查看嵌入程序后的叶面情况。3.常出现的界面错误:图片错误,页面不美观,布局不合理,与原先设计不符,文字 错误HTML代码错误,页面程序错误。4.界面bug测试报告:

正如Tanjurd瑭锦国际UI交互设计原则文中提到的,对于UI产品的验证主要从下面几个方面入手:

1、功能性对照UI设计的再好,和需求不一致也不可以。

2、实用性内部测试UI设计的最重要点就是实用性。

3、用户焦点小组UI设计是否优秀的重要衡量依据。最后,瑭锦Tanjurd说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开,是不可能的。

总结:

1.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的,但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。

2.用户研究与分析这个过程是非常重要的,设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等,提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下,更可以制定实景用户分析。

3.架构设计这里涉及到比较多的界面交互与流程的设计,根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。

4.原型设计我觉得这里应该是一个小的阶段标志,要对前面所有工作加以设计方面的实施,根据进度与成本,可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO,它不需要有全部的功能,但要体现出设计对象的基本特性。

5.界面设计如果很倾向于图形界面设计,这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计,否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。

6.界面输出作为设计师,在这一部分的工作就是配合好开发人员完成相关的界面结合。7.完善工作这个环节是很多部门共同参与的,包括可用性的循环研究、用户体验回馈、测试回馈。同时,UI人员也应该把一些可行性建议进行完善。Tanjurd瑭锦表示很多设计师做了东西不喜欢改,这是一个大忌。

如上的流程,可能会有很多部门共同参与完成,UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师,应该能贯穿整个UI流程进行工作,而并非是单纯的图形界面设计。

下载大神UI弹窗设计经验总结word格式文档
下载大神UI弹窗设计经验总结.doc
将本文档下载到自己电脑,方便修改和收藏,请勿使用迅雷等下载。
点此处下载文档

文档为doc格式


声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:645879355@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。

相关范文推荐

    UI设计流程

    UI设计流程 分析、设计、配合、验证 确认目标用户 在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同......

    UI设计基础知识 免费范文合集

    UI设计基础知识 UI设计学习者经常会陷入迷茫期,学习内容零碎杂乱、自觉性差、水平不够、无人指导走弯路等问题接踵而来,导致很多人半途而废。要想从零基础小白成长为真正的UI......

    UI设计合同样本

    北京XXX有限公司技术服务暨委托UI设计合同本合同由以下当事人订立,并于年月日签订:甲方:上海XXX有限公司乙方:北京XXX有限公司依据《中华人民共和国合同法》的规定,合同双方就甲......

    UI设计思路

    演讲稿 工作总结 调研报告 讲话稿 事迹材料 心得体会 策划方案 UI设计思路 UI测试用例设计方向[转] 设计功能和界面测试用例1.1 文本框、按钮等控件测试1.1.1 文本框的测......

    UI设计年终工作总结

    工作总结 时光飞逝转眼间2013年即将离我们而去,新的2014年已近接踵而来,光阴似箭,岁月匆匆,时间伴随着我们的脚步急驰而去,穆然回首,才发现过去的一年并不能画上圆满的句号,内心不......

    ui设计学习心得分享

    Ui设计学习心得分享 2014年终于结束了大学生涯,顺利毕业!大学四年学习的是文化产业管理,一个相对来说比较新兴的专业,当然工作也就相对难找了!该做什么呢?最终还是选择了做个文员......

    UI设计年度工作总结

    工作总结 时光飞逝转眼间2013年即将离我们而去,新的2014年已近接踵而来,光阴似箭,岁月匆匆,时间伴随着我们的脚步急驰而去,穆然回首,才发现过去的一年并不能画上圆满的句号,内心不......

    UI设计教学

    实用的UI设计教程 什么是UI? UI英文全称是:USER INTERFACE,中文即是用户界面 UI包括三大块,UX用户体验,GUI视觉表现,HCI人机交互 零基础学员怎么学习UI 首先,工欲善其事必先利其器......