「控件科普文」加载占位图+页面指示器

鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。 上期回顾:《「控件科普文」小红点+索引导航+分段控件》 Skeleton Screen/加载占位图 Skeleton Screen(加载占位图)是近年流行的加载控件,通常表现形式是在界面上待加载区域填充灰色的占位图,与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。 △ Facebook的Skeleton Screen Skeleton Screen的由来 Launch Screen(启动屏幕) 当你启动一个App时,需要从手机存储器和网络加载所需的控件和多数据,由于手机性能和网络状况的差异,加载需要等待无法避免。为了解决等待加载过程中出现白屏或者界面闪烁造成的割裂感,iOS规范中规定把界面控件框架的轮廓做成静态图片用于Launch Screen(在Google的Material design规范里被称作Placeholder UI),把Launch Screen放在用户点击启动App之后和App真正正常启动完成之间做过渡,从而消灭白屏和界面闪烁,给用户一种App启动很快的错觉。(然而国内的App不遵循iOS规范,在Launch Screen里放广告,这又是另外一个商业话题了) △ Launch Screen 非控件轮廓区域的内容变动很大,以上图浏览器为例,Launch Screen仅仅显示工具栏和地址栏,网页内容区域留下了大量空白,显然这不是最好的界面加载过渡方案。 Progress Indicator(进度指示器) 如果Launch Screen持续时间有点长,刚好用户又盯着Launch Screen大量空白的内容区域,可能会认为App出BUG了——虽然App后台正在辛劳的加载最新的数据。因此我们需要使用Progress Indicator来告知用户目前正在加载。Progress Indicator分为Activity Indicator(活动指示器)和Progress Bar(进度条)两种,前者就是我们非常熟悉的“菊花转”。 △ Activity Indicator和Progress Bar 有了富含动效的Progress Indicator,用户就知道我们的App并没有出BUG,而是在辛勤的加载数据,再过不久就能正常的显示内容了。 … 继续阅读

北漂两年半,UI设计师妹纸转行之UI的疯狂成长

在团队的前半年是楼主疯狂成长的时期,篇幅有点长,楼主分几期进行更新。也许是一个人单打独斗的时候被憋得太狠,导致在新公司M的前半年,感觉幸福来得太突然,所以斗志非常足,成长相当快。 M是家在线教育行业中型互联网公司,投资商也大有来头,资金充裕,管理比较完善。上班时间上午9点到晚上六点,产品网站为,APP做得也很强大,楼主学到不少东西。设计团队一共7个人,主网站3个人(楼主包含在其中),APP2个人,运营设计1个人,还有一个实习生也是做网站。PM(产品经理)一共5个,每人负责不同的模块。没有UX,UX的工作由PM和UI共同进行。   楼主的头衔是UI设计师,工作内容主要是三大块,一是每周都有的一些小活,做做banner或者美术封面等,二是网页设计师,三是APP设计师(后来接手的新内容)。可以看到公司越大,所负责的工作内容会缩小,等到BAT这样的环境会更加细致。     Banner和封面的制作   那年3月底,春暖花开,北京的空气在这个时间段也是相当好的。正式来到M之后,楼主怀着新的希望,又开始自己的奋斗。因为是团队作战,分工会比较明确,不像楼主之前一人负责所有的活,要干设计、策划、产品,偶尔还加加代码等等。在团队就安心将自己手头上的活做精致!   也是当拿到banner的活的时候,楼主开始尝试各种字体的设计效果(包括字体的种类、字号大小、粗细等),然后总结出一些字体的运用规律、找素材的方法、传意的方式等等,方便以后楼主在做一块事情的时候能以最高的效率做出最棒的效果。对,你也发现楼主喜欢总结了!   比方说,楼主后来做得多了之后,发现字体就是思源黑体、当时流行的iOS冬青黑体、方正兰亭黑系列是比较好看,切容易搭配的,以后除了比较特殊的主题,其它就先从这几类进行选择。   在做banner的时候,极大地磨练了楼主的审美,楼主在做的时候也比较用心,因为看着自己能力越来越高楼主也是一件让人很开心的事情。先上几个图给大家看看当时的一些小作品。       网页设计   在着手网页设计的时候,楼主前半年经过三个阶段,一是小模块的设计,接着是单个页面的设计,再后来是新项目整个的负责。楼主回想起当时的经历,第一感想就是,安心做好岗位手头上的工作,更多的工作自己就会找上门来。   1.小模块的设计 接到小模块的设计的时候,楼主先是惊叹于一个成熟的大网站到底是有多少页面和工作需要准备,以及它完整的视觉规范的制作。然后静下心来将自己所负责的区域开始做好,楼主负责的就是如下图的“经验”和“天天向上”两个模块。     楼主拿到需求之后,开始分析,分析的思路是由大到小,由里及外。先了解上下文,这俩模块是干什么用的,有没有跟其他的地方产生联系,如果设计了这一块会不会对其它方面有影响。这些是大环境的跟同事沟通,接着在这个基础上想,每个元素可能出现什么状况。比方说这个箭头是表示对比的意思,那么它下降或者持平的时候的状况怎么表示。然后在纸上罗列出各种情况,每完成一项勾掉一个。   当时楼主还是不太习惯用软件进行记录,感觉纸上的东西分析起来自己想得更明白,也没发现什么大的问题,可现在有问题了,楼主有保留的只有电子档的东西,手稿都没能保存,囧!电子档的材料好处就在于方便传送和保存,了解到好处了!   2.单个页面的设计 当完成两三个这样的模块之后,头儿开始让楼主接手单个完整的页面设计。从辅助页面到主功能页面的设计都让楼主开始接手。涉及到的每一个功能模块楼主都仔细做好。而在这一个阶段楼主的功底慢慢扎实,从空间布局到颜色的采纳,楼主一点点地在进步着。也许是因为一个人在北漂没有安全感的原因,所以楼主对领导的反馈特别敏感,想保住饭碗,小心翼翼将工作做到最好。 传一个截图给大家看看楼主后来设计的页面。很实在的一些东西。     经过了上面打的基础,来到M四个月之后,头儿开始安排楼主独立负责一个项目。公司想要拓宽市场,想开始尝试一个项目进行试水,于是楼主的头儿,推荐了楼主一个人去单独干起来。说真的,楼主当时只当是一项工作,不知道这后面意味着头儿对楼主的信任和栽培。当然,楼主一如既往,还是干了起来。   总结,不要嫌弃项目小,耐心做好手头上的工作,其实后续的成果会来得很快的!   下篇就来讲讲楼主开始单独负责项目,然后对Google … 继续阅读

做设计怕被毙,还去找什么工作!

总会听见有人跟我抱怨,在单位加班受累的总是我,就是因为我是刚毕业的新手设计师,做项目的时候,好多项目故意不让我参与。我也没办法······ 听了他的叙述,也许很多设计师都会说,当年我也是这么过来的,没有经验的小白难免在公司会受欺负,等有丰富的经验就好啦!   那么我们是默默忍受现状,还是努力去尝试其他方法去试图改变它呢? 美国人做过一个工资水平调查报告,报告的结论是:社会中最弱势的人,恰恰是最不愿意去挑战和改变现状的人。     很多初入设计职场的朋友,往往都不太自信,总是害怕进入公司会受歧视或者嘲笑,觉得作品或者软件技能不如别人,在经历挫折时就会对自己产生疑问,进入迷茫期。   不要过度的封闭自己,收起你的玻璃心! 很多刚开始踏入设计行业的小白都会遇到这么一种情况,他们每次跟一些行业大牛谈话时,特别是聊到工作中出现的问题时,明明发现自己不懂得太多,但是却羞于开口,不好意思问。   一直抱着这样的心理状态:他是大神,我只是一个小美工······每每鼓起勇气,想把所有的疑惑问题都说出来,实际上,却连上前一步做自我介绍的勇气都没有。毕竟人家是大神,去提问会不会觉得你很笨而且没有意思……   放下你被拒绝的担心,大胆努力的放开自己,并随时保持一颗谦卑的心   沟通一点都不难,大神也不是那么遥不可及的。大神也是人,你抱着谦卑好学的心态,他总不能一棒子把你打回去吧!首先,你得努力地放开自己,保持一颗谦卑的心,并从自己设置的套子里走出来,别人才能更好的帮助你不是么?     不要一直处于迷茫期,不行动谁也帮不了你   还有一些朋友,总是会抱怨:“大神啊,我好迷茫啊,该怎么办啊?设计时候没想法,没创意”……这样的问题,估计连大神们也不知道该怎么回答你!你要请教别人,首先要想清楚你要的具体是什么,把你的问题具体化,你自己都不知道你的问题是什么,别人即使很愿意帮你,但是也无能为力。     尽快的学会融入团体 网友@上山来临:在广告公司上班已经有半年的时间,虽然工作还算认真,但是就是无法融入团体,每天都过着压力山大的日子,生怕会被哪个新来的设计师给超越,对于我看来,其实那些被老板赏识的作品也没有那么好。   那么,作为一个设计新人,能够尽快的融入团体是非常重要的。 首先是要会欣赏人家,这个世界上形形色色的人都有,无所谓好坏,作为设计师来讲,有一点很重要:就是心态要开放。要学会欣赏人家,不要总觉得别人的设计不如自己,或者怕别人超过自己,端正自己的心态,你会发现融入团体是一件很开心的事情。最好的方法就是,你把大家都当成是很好的朋友,活得相对轻松一点,其实大家都很单纯,特别是设计师。   做好自己的职业规划 有网友@网者王:我今年21岁,大学刚毕业不久,现在在一家设计公司刚刚入职不久,之前找了很多份设计类工作也都不那么如意,我也不清楚现在这份工作能够干多久,但是幸好自己还算年轻,只能走一步算一步了。   其实对于设计新人,觉得一家公司真的不是那么适合自己的时候,往往选择跳槽也不是一个错误的选择,但是频繁跳槽,总是抱着走一步算一步的态度去工作,永远都不会长久的。对于新人来讲,一定要做好自己的职业规划,问问自己做的是不是自己喜欢的,想要的?1年后做什么,2年后做什么,3年后自己是什么样子,做的是不是有关设计的???     确定自己的设计方向 说到这一点吧,前提你一定要了解自己擅长哪方面,不要今天做平面广告,明天做UI,后天又做动画,大后天做网站开发了。没卵用,了解自己适合不适合再去决定,所谓术业有专攻,即使这些领域你都了解,还是专注于一个方向发展比较好。     … 继续阅读

如何将黄金比例应用在APP设计中

黄金比例是自然界中完美的比例,它也是非常重要的设计知识点。在我们日常生活当中随处可见。应用在家居、 电器、 徽标和照片上。我们的意识趋于和谐与美,和”黄金比例”是优雅的方式,使产品更舒适和很好的感知。 简单地说,黄金比例是一个设计工具或法则,让我们寻找在设计中的平衡。 下面我们看下自然界当中一些美的东西。确实黄金比例的最佳演示。 下面举2个例子来跟大家一起来学习一下如何应用黄金比例工具来设计我们的APP界面。 第一个APP设计实战案例: ASOS 存储卡产品的 APP UI界面设计 该APP的第一个屏幕的查看照片和记录行动是可用的︰ 比如保存在收藏夹中,播放视频和分享。 假如你想要筛选产品的尺寸大小、 颜色、 面料描述的信息,然后在添加到购物车这一个过程会感觉很不舒服。因此下图左图,想要”快速”查看的产品是非常困难的。 如果我们利用绘制”黄金矩形”的法则来优化这个UI界面,稍微按照右图那样放置元素,即可让整个APP UI界面的操作性大大的加强。 这种布局结构的调整,使得尽可能在第一个屏幕上展显出的最合适用户的数据和信息。 这就是采用黄金比例来进行APP设计的好处之一。 方便验证你的设计方案是否合理。 正如我们所看到的在”聚焦点”,我们还可以添加”保存到收藏夹” 这样的按钮和功能,在应用程序中的关键行动之一。而不是乱放,有根有据的放着新增的元素和功能。 元素必须放置在位于大拇指操作屏幕舒适内的距离,也就是下图当中的最大弧线的到右下角的区域,所以用户是很容易就可以用拇指按下与进行操作的。 第二个APP设计实战案例:一个博客APP的详细页的UI设计 我们把有相当大的图片和文本的分为两个大区域。他们之间的比例应该是黄金比例。 如下图所示: 然后在图片上,继续采用黄金比例把相关的 点赞 和 评论的 按钮放在图片的右下角上。 今天就跟大家分享这二个APP设计实战案例,就是想告诉大家可以通过黄金比例这个工具来布局我们的APP UI界面。设计出符合人性化的操作界面。 同时,也告诉大家每一个APP设计元素的摆放、位置的移动都是可以根据黄金比例来校验。 通过分享这2个APP设计案例,希望大家可以多思考下自己设计的作品,按钮、小图标、图片与文本内容的是如何构建这个界面的。 相关专题:《黄金比例在设计中的运用》 以上由丝路教育http://www.silucg.com?bp整理提供。希望大家有所收获。

一流用户体验设计师的6个共同点

上周跟朋友聚会,席间一个负责招聘用户体验设计师的朋友跟我们聊起她招聘过程中遇到的趣事。她曾面试过上百位设计师,几乎每次她都会问求职者一个她认为非常重要的问题。“你为什么能胜任用户体验设计师的工作?” 应聘者的回答大都涉及线框原型工具的使用能力,“我能熟练使用Axure”,朋友心想:“不错,可惜不够聪明。”另一位从国外留学回来的应聘者说:“我可以根据你的要求,现场用Mockplus做一个交互”,朋友说:“你很聪明,懂得选择设计工具,但这远远不够。” 的确,用户体验设计师对各方面技能要求都很高。有个老同学完全不了解这行业,好奇地问她,到底什么是用户体验设计师?朋友也给不出明确的定义,只是拿出手机里的一张图片给我们看: 图中最大的圈包含用户体验设计师要具备的技能,看起来有点吓人。根据这张图,用户体验设计师需要同时具备交互设计,视觉设计,信息架构,工业设计,人机交互等诸多能力。朋友连忙解释,按照这个要求,可能他们一年也挑不出一个合适的。这些能力其实不作为公司选拔用户体验设计师的唯一标准。朋友入行多年,结识了不少优秀的用户体验设计师,在他看来,这群人中,有些共同的特性,是他们非常看中的。 一.不满足于曾经的设计作品 很多人在应聘时说:“我曾设计某个app,你在应用商店里能找到”,并以此为筹码,就好像自己在北京市中心有套房一样底气十足。实际上,面试官见过的优秀的设计师不胜枚举,这样说不仅不会为自己加分,反而让人觉得此人对自己的要求不高,容易满足于过去的成绩。真正优秀的用户体验设计师,即使设计出非常好的产品,也不会停下来自我欣赏。因为市场需求变化太快,他们终日忙于跟上用户的脚步,不断地改进和完善,他们从未“完成”过一件产品,又怎会轻易把作品拿出来供人赏玩呢。 二、手上永远有2套以上的方案 每个人都可能成为产品的使用者,所以用户体验设计师有责任准备多套方案来应对不同的需求。产品经理,运营人员,投资方,甚至是程序员,都可能站在自己的角度对设计师的方案提出质疑,你可以说他们不懂设计,但不能说他们不懂用户。换句话说,当你手中有多套方案,其他参与者能感受到你做了充分的准备,并且将他们的想法考虑在内,此时对设计师也是有利的:这样一来,争论的焦点就不是“你的方案好不好”,而是“哪个方案比较好”,避免了设计方案被评头论足,一票否决的尴尬境地。因此,下次老板对你说:“这个方案不错,你再多做几套我看看” 时,是不是该正确看待呢? 三、强大的全局观 一流的用户体验设计师通常都能把握全局。这并非要求他们有运筹帷幄的本领,而是说设计者应具备兼顾整个产品流程的能力和责任心。在产品设计与开发的每个阶段,应该如何与上游和下游的部门进行合作,如何从他们那里得到支援,这些都体现了用户体验设计师的全局观。 产品设计与开发流程:用户调研 >角色设计 >需求分析>草图 >原型>可用性测试 >开发 >上线 明确的步骤和阶段性的目标能帮助设计者控制好流程,树立全局观念。 四、多种调研方式,挖掘用户需求 用户体验设计师,顾名思义,是一个以用户及用户体验为核心的职业,因此用户调研是必不可少的。做用户需求调查有多种方式,直接的客户拜访,组织焦点小组座谈,脉络访查等等,无论是哪种方式,最终目的都是获取真实的未受影响的用户反馈。 很多设计者了解这些调研方式,却不了解其适用性。拿焦点小组举例,由于群体压力会导致明显的趋同行为(1955年,所罗门阿西实验),有些被调研者的想法会受到很大影响,导致个体的意见被压缩甚至完全损失。因此,部分个体在焦点小组座谈中无法提供真实用户反馈。 焦点小组座谈:由一个经过训练的主持人以自然形式与被调查者交谈,主持人负责组织讨论。小组座谈的主要目的是通过倾听一组从目标市场中选择出的被调查者,从而获取对有关问题的深入了解。该方法的价值在于可以从自由进行的小组讨论中得到一些意想不到的发现。 什么情况适合什么方法,的确需要设计者自己来摸索。可以确定的是,一流的用户体验设计师总是愿意采取多种方式,深入地挖掘用户需求。 五、善于利用第三方视角审视自己 众所周知,搞设计不是搞艺术,艺术的重点在于表达,因此不必在乎别人的评价。但一流的用户体验设计师应该是唯物主义的,不仅要吾日三省吾身,更要借助他人的眼睛审视自己。国外著名设计网站UXMastery的专栏作家Emil Lamprecht在阐述这一观点时举例说:你为一次约会而精心准备,将头发弄得一丝不苟,却忽视了自己裤子拉链还敞开着。这个例子有些夸张,但充分说明:单靠设计师自己很难检查出产品设计中所有的问题。当产品上线后,那些好的创意未必能被察觉,但缺陷和漏洞,却逃不过用户的眼睛。因此,一流的用户体验设计师,要善于利用第三方视角审视自己,做到防患于未然。 六、不止步于产品的完成 是不是产品一旦发布上线,用户体验设计师的任务就完成了呢?客观地讲,一个产品永远无法 “被完成”。 很多问题是发布之后才体现出来的,即使是用户反馈很好的产品,也会随着时间的推移暴露出一些缺陷。同样的,在产品被更新迭代的同时,设计师的认识也在不断提高。从另一个角度讲,用户体验设计师的成就感不仅来源于方案被采用,产品被开发,上线。更源于后期不断地修改和提高。能够时刻紧跟用户的需要,努力为他们带来好的体验,何尝不是件幸福的事?对用户体验设计师来说,产品正如自己的孩子,即使是成年的已经离家的孩子,也会热切关注其日后的发展,这是优秀的用户体验设计师对产品应有的牵挂。   原文地址:jianshu

如何设计出一个完美的搜索框

所谓搜索框,实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计, 毕竟它只涉及到两个简单的元素。然而,在那些重内容的网站上,搜索框常常都是用户最用到的设计元素。当用户遇到一个相对复杂的网站时,他们往往会首先寻找这个网站内的搜索框,以便能快速高效地到前往自己想去的页面或找到自己最为关心的内容。因此,搜索框的设计及其可用性问题其实是一个不容忽视的要点。 在这篇文章中,我们将看到该如何改进设计搜索框,以减少用户所需要花费的查询时间。 1、使用放大镜图标 一个搜索框应该始终与放大镜图标放在一起。所谓图标,其实就是代表着一个对象、动作、想法等多种含义的图形符号。我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。然而,对于用户来讲,具有通用性代表含义的图标为数并不多,幸运的是,放大镜图标正是其中之一。 即使没有文本标签,用户也能轻易地识别放大镜图标   提示:使用示意型的图标即可,这也是最简单的放大镜图标版本。更少的图形细节能够加快用户的识别效率。 2、搜索框要显著 如果搜索是你的应用程序/网站的一个重要功能,那么搜索框的显示务必要足够显著,以保证用户能够最快的发现它。     直接显示完整的搜索框很重要,因为默认只显示搜索图标(点击图标才展开搜索框)的话会使搜索功能不那么明显,而且增加了用户的交互成本: 3、提供一个搜索按钮 搜索按钮可以帮助用户识别出触发搜索操作的下一步——即使他们可能往往会通过按Enter键来执行此操作。 提示: 1)提交按钮的尺寸大小要合适,以便用户不必非常精确地移动鼠标位置到它上面。较大的可点击区域会使得按钮本身更容易被发现和点击。 2)使用Enter键或点击搜索按钮都应该能执行搜索操作才对,毕竟许多用户仍然有点击搜索按钮来提交搜索的习惯。 4.、将搜索框放在每一页上 用户在每个页面上都应该能获取搜索框,因为如果用户找不到他们要找的内容,他们往往会自然而然地想要尝试使用搜索功能来进行查找,他们才不关心自己当前是在你网站的哪个地方(以及该不该有搜索)。 5、搜索框要足够简单 如果你设计了一个搜索框,请确保它看起来确实像是一个搜索框,并且使用起来要足够简单。可用性研究表明,默认情况下不显示高级搜索选项对用户会更加友好。高级搜索选项(例如下面的示例中的布尔搜索查询)可能会混淆要尝试使用它的用户。 6、将搜索框放在用户预期找到的位置 如果因为搜索框不够突出、不容易察觉,用户还得花费精力去找它,那这个设计无疑是不够友好的。 下面的图表来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研究:它显示了参与调查的142名参与者针对网站中的搜索表单的位置的预期情况。研究发现,对于用户来说,搜索框最佳的位置是网站上每个页面的左上方或右上方——用户可以使用常见的F形浏览模式轻松地找到它。 该图说明了参与者对搜索框所处位置的预期情况。 右上方仍然是用户希望找到搜索的第一个地方   因此,最好将搜索框放在页面的右上方或中上方,以确保用户能在预期的位置找到它。 重内容的YouTube把搜索放置在页面的中上方   提示: 1)理想情况下,虽然搜索框在用户需要的地方应该能轻易出现,但是搜索框的设计也应该完美地契合网站的整体设计效果。 … 继续阅读

北漂两年半,UI设计师妹纸转行一个人打拼的半年是什么样的?

上篇文章讲到楼主是怎样从二线城市的平面设计师找到帝都的UI设计师工作的,感兴趣的童鞋可以点击文章末尾的链接进行查看。这篇介绍下楼主加入创业公司后,一个人单打独斗的前半年是怎样度过的。希望能给同样在创业公司或者说想转行的伙伴们提供一些参考案例。 背景介绍 找到工作后,9月初上班,从找工作到真正上班差不多半个月的时间。公司在五道口,楼主暂时称它为L。   从来到北京到找到工作为止经历了半个月时间。时间比自己预留的一个月要短半个月的时间。接到offer是礼拜四,然后约定的是下个礼拜一去上班。住在南六环,工作在北五环,如果这样每天上下班在路上的时间都要4个小时,表姐心疼楼主,于是找了她之前的同事收留楼主,地址是南四环,这样每天楼主省去了一个小时,房租每个月700块。   差点忘了说了,楼主第一份工作薪水是税前6K,税后4600+,楼主当时已经很开心了。除去每月地铁100块左右(当时北京地铁还没涨价),三餐1000块左右,日用品,添置的小物件,楼主每月还可以剩下2000左右的钱。这是楼主非常节约的情况。但前三个月要买的东西比较多,楼主也没有省下很多钱。住的地方是和一个姐姐合租的10平米左右的小房间,房子四室一厅,一个公用洗手间。礼拜天处理好这些事情之后,第二天楼主开始上班了。   在L,公司一共10个人,行业是在线教育(当时在线教育萌芽期没有像现在这么火),设计师只有楼主一个,并且公司刚成立,所有的材料都要从零开始。   楼主的职责呢,包含了平面设计师、网页设计师、H5设计师、产品设计师,基本上是全能手。   平面设计部分的工作内容 平面设计的职责内,楼主设计过海报、三折页、名片、书签、电子贺卡等。不仅是要设计出来,还要跟打印室进行对接,将成品拿过来。这些驾轻就熟,也就很快适应了,也得到了领导的认可。但这期间楼主一刻也没有停过,人非常累,主要是住的也远。 于是工作两个月后,但这个是后话,楼主又从南四环搬到公司附近北四环,这个时候,楼主在附近找了个平房,月租800块,可以承受,上班走路15分钟就到了。别问楼主怎么找的,楼主费了九牛二虎之力才找到的,五道口那地方可是号称“宇宙的中心”,普通的一个单间就要2000+,楼主那微薄的工资根本扛不住。   搬得近了之后楼主的时间也多了,每天楼主多了2个多小时的学习时间,主要是人轻松了,精力也旺盛了。所以建议没家室的伙伴们住在公司附近,节约出来的时间和精力如果用来学东西,会给自己带来质的飞跃的改变。     网页设计部分的工作内容   国庆节过后,公司开始筹备建立官方网站。楼主先跟领导们商量官网的页面和结构应该怎样布局,怎样实现。因为是创业公司所以只需要介绍企业情况,以及几个准备推的销售页面,实现的话交给外包公司是最省事的(公司那时还没有程序员)。   说干就干,于是楼主撸起袖子,一遍在网上查看教程一遍自己根据自己的需要进行设计,最后配好色,将设计方案再与外包公司进行对接,主导整个流程。也全凭夏天学的一点HTML、DIV+CSS的知识,楼主见到自己不满意或者沟通不顺畅需要自己修改的时候,起到一点作用。   一个半月,整个网站从讨论到设计,再到交接实现,全程都是楼主一人在忙。期间自己连续两天一刻不停地忙碌,中间只睡了5小时,一直在想网站的方案,住在公司的情形,至今难忘。   经过这个项目之后,楼主又负责与外界企业进行合作的网页设计,后来合作的范围越来越大,甚至包括了网易云课堂。嗯,在那段期间,网易云课堂上的页面也有楼主设计的一部分。放一部分那时候做的网页上来作为参考吧。     移动端部分的工作内容   移动端部分的工作内容,楼主当时先从H5进行设计。H5当时也不像现在这么成熟,为了节省成本,楼主采用的方式是自己设计,但是利用创作平台省去了开发环节。当时市面上有几款不错的平台,摸清楚它们的实现方式之后,楼主就开始拿着自己设计稿开始实现起来。从头到尾,除了需求是跟领导一起确认的之外,从设计到实施也是楼主一个人。 这个时候已经是12月底了,北京的冬天干冷干冷的,楼主感到特别无助。这种单打独斗的孤独感,也是后来楼主辞职的原因之一。     对于APP的开发,楼主一直想做,怎赖公司有开过会议讨论,但一直停滞不前,可能是资金的问题,也可能是公司在那个阶段根本不需要APP进行运营。也是楼主一直惦记的事情。 过完年,2月中下旬,开始上班。照样很忙碌,照样一直在做事情。但那个阶段是楼主在北京最开心的日子,因为楼主可以经常在清华溜达,美丽的校园让楼主非常放松,看着学生们出出进进,看到不同年龄段的人都在努力提升自己。那种朝气蓬勃的感觉,让楼主坚信自己会越过越好,就是一种无名的自信。   3月份,没发工资,公司资金出了问题。这个事情,让楼主开始重新投简历,因为楼主不能断粮,也没有那个资本断粮。而基于这半年的经验,楼主受到了同行业内好几个offer的邀请。最终楼主选择了一个有着7人设计团队的发展中公司,薪水升为8K(也很低,但好戏在后头,希望伙伴们耐心等待楼主更新)。楼主在创业公司一个人打拼的现象总算告了一个段落!期间楼主的自学经历为以后的飞快发展打下了坚实的基础。 … 继续阅读

实战经验:设计师如何评估改版效果

一、背景  互联网产品的节奏特点就是小步快跑,不断迭代优化,因此产品改版是很常见的情况。设计师和产品同学等也都意识到可以借助调研帮助实现业务目标和更好满足用户需求。但是在实际工作中,笔者经常会遇到设计师在改版前会来讨论要调研的内容,表示不太清楚从何入手,或者改版后过来咨询“我们想看看改版后的效果,但是不知道该用哪些指标,看哪些数据?” 鉴于以上情况,笔者结合项目实践,归纳出一些通用型的经验和流程来帮助设计师自行开展改版项目的调研工作,由于篇幅的问题,本文先只介绍改版后的效果评估部分,总结起来,可以从3个意识,5个环节入手,具体请看下文。 二、改版效果评估要具备的3个“意识”  在介绍具体的实操流程前,先把个人认为非常重要的三个“意识”分享如下: Tips1: 评估工作要提早开始准备,改版结束才想起来需要收集分析数据可能就来不及了; Tips2:改版目标要清晰、具体、可量化 ; Tips3:关注数据,更要重视和分析引起数据变化的原因(设计,功能等),以作为后续工作的指导。 三、效果评估流程的5个环节  笔者通常把效果评估流程分为以下几个环节,根据大家集中集中反馈的问题情况,本文重点介绍制定指标和对比分析两个环节。 1、明确改版目标 具体,可量化,可实现(目标数据合理;改版内容与目标相关较大)的改版目标是制定评估指标的前提。 【反例】改版目标:通过改版xx页面,提升用户体验,促进用户再次购买 【解读】 1)不够具体:用户体验包含的范围太大了,具体指哪方面?效率,满意度?如果不能清晰的定义,当然也就无法衡量。与之对应的,“促进再次购买”就可以通过“复购率”等指标进行解读和评估。 2)不能量化:即使促进再次购买,那么计划是提升多少?有了具体的目标数字,才能评估目标的完成程度,当然,如果目标是提升了就好,不在乎具体数字,那另当别论。 3)不容易实现:在本案例中,经过与设计师的沟通,发现改版的页面是订单列表页,本次改版重点是解决收集到的的用户体验问题,减少操作失误等,且改版内容也主要是信息布局等。可见,这些改版内容并不太能“促进再次购买”因此,制定这个目标并不太合适。 【修改后的目标】:通过改版XX页面,用户的一次操作成功率提升5%,解决体验问题10个。 所以:如果下次苦于找不到改版效果评估的指标,可以先回头检查一下改版目标制定的是否具体,可量化,可实现。 2、根据改版目标制定衡量指标  当然,清晰的目标还是依赖于对目标的拆解能力的,不排除有些童鞋表示“我就是不知道如何从比较宏大的目标变成具体的小目标,该用哪些指标来表达呢”? 或者之前就定的比较模糊,现在都改版完了,也没办法完善目标了。那么,笔者先介绍一个从改版目标推导到衡量指标的思考模型,再介绍一个自身实践总结的常用评估模型供参考。 1)从目标到指标的思考模型  当确定了比较宏观的目标后,还需要找到能量化、细化目标的指标,这个推导的思路可以借鉴Google的GSM模型 2)评估模型参考  各个产品不同,当然改版目标也不同,但根据笔者的经验,这些目标基本可分为两类:体验目标(如:提升用户满意度)和商业目标(如:提升付费用户规模)。所以,评估模型也按照体验和商业两类分别介绍。 ① 用户体验评估模型  由于用户体验是指用户在使用产品/服务时的主观感受,这个概念包含的内容比较多,且比较宏观,必须找到合适的切入点(能较好解释用户体验的一些细分维度)和量化手段(可以观察,收集到数据的指标)才能有效评估体验的质量。 在用户体验领域,评估体验的模型,比较知名的有Google的HEART模型,但是由于国内外产品、文化的差异性,导致该模型的适用性受限。1688UED的同学以用户接触和使用产品的路径为主线,提出了用户体验的五度模型,从吸引度、完成度、满意度、忠诚度和推荐度五个维度来评估和量化用户体验质量。 用户体验质量评价的“5度”模型 资料来源:《设计的理性之光 数据在互联网产品设计中的应用》戴均开 余代军 根据实践发现,在B2B的业务中,由于竞争、商业隐私的问题,B类用户即使觉得产品体验不错,也未必愿意推荐给他人,因此推荐度未必适应于B类业务。而且根据NPS(净推荐系统)的概念,推荐度/推荐意愿能较好的衡量忠诚度,所以笔者认为,不论是B类C类产品,吸引度、完成度、满意度,忠诚度四个维度就好较好的评估用户体验。  另外,根据产品类型不同,在评估用户体验质量时,以上四个维度的权重也是可以有区分的。比如,产品类型可根据目的分为信息型(以展示,引流,介绍为目的的,比如首页)和工具型(需要用户操作较多的,如开通流程,商品发布页面等)。相应的,信息型产品会需要更关注吸引度的目标是否达成,工具型的产品更强调完成度。 ② 商业价值评估模型 … 继续阅读

做与用户对话的产品界面:微供对话式设计语言探索

引言 随着人工智能、自然语言技术的逐渐进步,产品不再是冰冷的呈现在用户面前,你可以同他对话交流。掌握着前沿科技的行业老大们都相继开发出各自的人工智能对话产品,比如siri、微软小冰、Google Assistant、度秘。当然,对于大多数的产品来说,现阶段还不具备接入如此前沿的科技技术。设计师可以运用一些视觉化的方式,让无生命的产品界面充满人情味,实现与用户对话。 siri/微软小冰/Google Assistant/度秘 一.深入了解用户,把产品想象成他的伙伴  人工智能的对话,是机器通过与用户的交流,进行语言积累后自我学习成长,再形成更贴合用户习惯的交流方式。而通常的产品不具备人工智能的自我学习,但是作为产品背后的设计师,可以通过深入了解用户群体,提炼用户画像。通过熟悉用户行为特征,模拟用户性格喜好,最后以设计的洞见赋予产品贴合用户的人格。 以微供业务为例,通过调研得出微供业务的微商群体多集中在26~30岁女性,以宝妈为主的兼职小微商。 微商做生意的最大特点是通过微信,微博等社交平台进行商品的发布和交易。与传统电商平台最大的不同是:普通的电商平台,商家和顾客之间完全不认识,甚至不需要沟通这笔生意就达成了。而微商的顾客,大多是从身边的朋友、熟人开始。所以微商在做生意上非常看重朋友这一关系属性。 基于上述的用户特征,我们将产品的人格定义为“朋友”。希望界面能够给用户带来一种与温暖贴心的好友交流的感觉。 二.根据产品性格,让产品“说人话”  “骁龙820处理器,最大可选 4GB 内存 + 128GB 闪存 ,4 轴防抖相机,3D陶瓷 / 玻璃机身…“看到这一长串专业术语估计90%的人都要懵逼了。但如果换一种说话方式”十余项黑科技,很轻狠快“。大部分人都会反应:哦~好像很厉害的样子!没错这就是说人话的文案和不说人话的文案在用户端的感受差异,大部分的用户对于那些看上去很专业,故意烘托气氛甚至假大空的文案一点不感冒。他们更青睐直白明确的,更贴近日常语言的文案。这两种文案的区别,业界给出过比较专业的定义,即X型文案和Y型文案。X型文案文字华丽,把本来平时无华的表达写得更加有修辞。Y型文案不华丽,甚至只是简单地描绘出用户心中的情景,却充满画面感、直指利益。(引用自“李教授教你如何减少文案中的’自嗨现象’“一文)。上面的例子就是小米手机5的文案,小米非常擅长写作X型文案。在移动App设计领域,近几年也有很多优秀的“说人话”产品,比如:Airbnb、咸鱼、小红书 airbnb:运用口语式对话感很强的文案,而不是冰冷的“用户反馈” 咸鱼:发布商品信息用对话式文案告诉用户认真写描述的好处,而不是“填写商品描述” 小红书:每个专题的文案都能够让用户感知点进去能得到什么,而不是用“品质好货集合”这种空洞的描述 产品不仅要说“人话”,还要说符合产品“性格”的话。比如:基于咸鱼呆萌个性的“鱼塘”,小红书时尚潮人性格的“种草拔草” 微供市场中,符合“温暖贴心的朋友”性格的对话通过以下几点体现: 1.拉近与用户的关系,运用第二人称“你” 朋友之间的对话是不需要过于客套的,用“您”就显得疏远了很多,“你”更有贴近用户对话交流的感觉 2.拒绝命令式文案 什么是命令式文案?就是平台站在自身视角像用户发出的指令,这种文案不考虑用户是否认同,如:立即转发,带有强烈的命令语气。改成“转发卖货”后,文案的情绪就变得中性了,同时文案也暗示了用户转发后下一步的操作。 3.让文案口语话,增强与用户的互动感 在一些运营推荐商品区域,将原有的平台化视角语言,如:”微商爆款“改成“帮朋友选些好的”,“猜你喜欢”改成“为你挑好了,“新品首发”改成“10点早茶等你”。通过“帮”、“为”、“等”突出与用户间互动的感觉,文案上也更加口语化。 三.场景化的插画运用,帮助增加小情趣 好比聊天当中的一些调侃和幽默,在界面中适当的运用一些插画来表达一些稍显枯燥的内容,能够让界面更具人情味,丰富产品“人”的感觉。通常的插画多被用在一些空状态中,比如404等页面,通过幽默填补无内容对用户心理造成的失落感。 微供设计中,我将插画的设计加了一个定语:场景化,目的是增加代入感和故事性。并且插画的运用从常见的缺省页延伸到了微商工作台上,给工具感强的工作台增加一点趣味性。 首页工作台区域有3种用户状态,在新用户无任何订单信息时通过场景插画描绘出微供市场转发卖货流程。当有订单信息时,运用拟物化场景工作台,增加用户代入感 采源宝介绍页面的几个关键利益点,采用场景化插图的形式,帮助用户理解。同一元素的反复贯穿,增强插画统一性,突出产品移动端特点 四.增加独有的元素符号,丰满产品形象  元素符号是产品品牌的延续,是产品独特气质以及区别于其他同类型产品的核心。就像不同人都长的各具特色一样。微供市场中提取了极具微商特色的对话气泡,对其进行视觉简化,使之更加符号化,更适合多场景应用。同时,为避免符号滥用,定义了气泡的使用场景和规律,即:只用在标签和行动按钮上,将平台给出的信息与用户的操作行动点用左右气泡的形式表现。通过左右气泡的形式增强界面的对话感。气泡元素配合前文提到的说人话文案,也能提升整个产品的人格化。如在大促场景中经常有的店铺红包,通用的做法是在店铺名称后加上“店铺红包”标签,而结合气泡及人话文案就可以改成“来抢红包啦”,配合图形,有种店家对用户说话的感觉。 气泡元素的提炼及左右气泡使用规范 大促店铺红包融入对话式气泡及文案 总之,通过视觉手段表现对话式设计的核心就是”在可以视觉干预的地方努力增加产品人格性,增强用户代入感、互动感“。说人话的文案、场景化插图、特色元素等都是能够打动用户心灵的方式。通过视觉的手段配合个性化算法,自然语言等技术能够让产品做到全方位立体化的对话式,在此也是抛砖引玉,更多的对话式设计手法还需要一起不断在设计中探索。 相关文章:《对话式交互会成为未来吗?》   原文地址:aliued

北漂两年半,聊聊我从平面设计师转为UI设计师的经历

周末写了一篇文章,关于我(@Sophia的玲珑阁)这几年的北漂职场经历,只想给各位纠结于是否应该去北上广,是否应该转行设计师,怎么转行等等问题的伙伴们一些参考,因为这些我都经历过。当然,北漂所经历的找工作、职业技能提升、人脉重新积累、租房、被催婚等等问题,我都经历过或者说正在经历着。 起因 2014年夏天,当我在武汉想从一个平面设计师转行为UI设计师,提高自己的职场竞争力,跑遍整个武昌区,却发现没有一个靠谱合适,并且愿意接纳新人的地方。也许是当时我段位低,也许是武汉互联网氛围不够浓,不管怎样,我在某招聘网站投出的200多封简历都以帮助我认清武汉市场的结果而告终。 正好一位在北京读研的大学同学来到武汉,他给我提一个建议,不如去北京试试。这一建议,让我灵光一闪,不如去试试吧,还这么年轻,说不定开开眼界也是一件好事。当跟父母商议这件事之后,他们只说了句“那你就去呗”。后来我才知道,他们的用意是想让我去趟北京吃些苦之后,然后安心回武汉嫁人生子,没想到我这一去就呆在帝都短时间内不想回去了。 曲折而又幸运的工作经历——第一份工作由平面设计转向UI设计师。 1. 分析优劣势 去北京前两个月,我就开始想去了之后应该怎样转行?经过在武汉的一些面试,发现企业需要的是实实在在有工作经验的UI设计师。于是我开始分析自己的优势与劣势,扬长补短。我的优势是在武汉有着两年的平面设计经验,美术功底还是有的;二是我是工业设计专业毕业,这个专业转UI设计还是不难的,因为有着产品设计的思维。 关于劣势,就是没有工作经验。于是我翻开各大招聘网站,仔细研究招聘要求,总结出几点要求:界面设计工作经验(移动端以及web端)、会画图标、良好的审美、注重用户体验、会合作(当时想到的就只有这些,当然找工作光有这些也是不够的,随着我经验的积累,再一点点更新)。 2. 准备工作 经过分析之后,感觉前两者是我的硬伤,便在武汉最热的两个月,关在家每天开始临摹图标,和移动端界面,在网上搜索一些教程,自己学着设计网站,HTML、div+css语言,每天其实都处于一种很忙碌的状态,只为两个月后上战场。还有一件事,就是我也在网上接一些小的UI设计的私活,一是为了有实战经验,二是为了准备好去北京的盘缠和前几个月的花销。附上几张我当时临摹的图标,还是比较粗糙的。 3. 去北京 八月底,夏天已经没有那么咄咄逼人了,我想现在北京也应该不热了,是时候去到处跑了。于是提前一个礼拜在招聘网站上投出简历,附上我这两年的平面设计的作品集和这两个月接到的几个项目的实战方案,临摹的几十个图标等等,分类清楚,然后一起打包发给各个公司。 当然我也会量力而行,就是简历投向的是UI设计和平面设计都需要做的岗位,公司正在发展中或者初创时期的,这样感觉概率比较大。工作地点也不挑,但偏向更市区一点的地点,太偏僻信息交流更新都没有城区集中,对个人成长发展不利。这些信息都可以在网上查找出来。就这样大概接到了几个面试通知,于是约定好下周去面试。 我选择了礼拜五去北京,卧铺直达(别问我为什么不选择高铁…),第二天上午到。大学同学来接我,送我到表姐家落脚,地点是亦庄(帝都的朋友们都知道是南六环)。选择礼拜五去,是我还有两天的时间去处理一些杂事,比如办理公交卡,熟悉附近的公交线路,调整简历,准备面试问题等等,时间不多,但足够了。 4. 开始面试 礼拜一开始面试,现在已经记不清第一家具体是哪家公司了(因为当时面试太多)。只记得那天跑了两家,上午一家在健德门,下午一家在刘家窑。早上坐两个小时的地铁去面试,中午吃个三明治,然后奔向另一家。一天下来,在路上的时间花费五六个小时,下午五点回到亦庄。总结今天自己的问题出在哪,完善简历,继续UI基本功的练习,然后继续投简历。 接下来的四天基本上一天都会面试个2~3家,职位从UI运营设计师、游戏UI设计师、APP UI设计师、网页UI设计师等等一路了解面试下来,其中自己也了解了一些工作的内容倾向。因为我有个习惯,就是每次面试之前就会将面试的公司的网站都查一遍。如果官网信息做的特别清晰的,说明这家企业比较正规,我了解职位信息也越多,我准备也能越充分。 5. 拿到offer 就这样,面试持续了半个月,接到了3~4个等通知的状态,最后收到两家的offer,我比较之后,选择了一家在五道口的创业型公司,设计师就我一人,负责公司所有的平面+UI,暂时就叫它L吧。其中表姐也给了我不少建议,主要是对北京整体情况的介绍,以及对某些公司的运营情况的分析。 面试结束之后,我统计了一下简历投递情况和面试公司的具体数。简历投递了有600多封,面试也有快30家。也许伙伴们会又开始喷我,这样的数量才面试上一个,可我能说的是,我当时水平恐怕真的只有这样吧,让伙伴们失望了。从一个武汉小康之家的富养大小姐,到帝都的草根女屌丝,我已经很拼了,比我吃过更多苦的人大有所在,现在想来也确实没什么。 但我清楚地记得当时拿到offer,开心地在回亦庄路上哭出来的场面,这第一步,我算是迈过去了。 面试心得:每个企业在招人这一块都花费了大量的精力的,企业也想找到自己所需要的人才!作为新人,首先能收到面试通知,已经需要感谢企业能给自己这样一个去让企业了解自己,以及自己了解行业的机会。接着,做好自己该做的事,给企业充分的尊重,多去想想对方需要什么样的人才,这些包括职业技能(能干活)、沟通能力(省心省事)、人品考察(靠谱,值得信任)。最后,双方没有达成合作意识,不需要否定自己,可能只是双方发展程度不一致,导致暂时匹配程度不高,双方需求不一致的原因。心态上,要冷静分析,然后面对情况,缺哪补哪。 6. 总结 打仗就要有打仗的阵势,从粮草准备,到攻略,再到实施,根据反馈调整战略,这一步步都是自己成长的契机。 可以看到我并不是什么设计天才,所有做的这些都只是因生活所迫,让自己变得更好。这一点,也让后来的我在学习一颗怜悯之心。 今天先写到这里,接下里的一篇我将更新,在国内创业型公司L,我怎样从平面设计师到全能设计师的前半年经历,以及我第一次在帝都的搬家。踏出第一步就意味着胜利了一半,帝都后来对我的磨砺让我成长更多~周末愉快~ 作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。 职场设计技能,更多教程抢先看,请关注作者的微信公众号:「Sophia的玲珑阁」

像做学问一样做设计

这篇文章的主题,其实在脑子里已经有一段时间了。趁着这两天准备开始自己的每月一篇的翻译设计类文章的计划,于是想结合译文来写一点关于这个主题的一些想法。巧的是在medium上发现了一篇文章,叫《The Day You Became A Better Designer》。作者是Tobias van Schneider 。关于作者,具体的我没有了解的很多(有兴趣的可以自己去科学上网查看他的个人网站和资料),从他的设计作品和文章来看,是一个一流的设计师。他是一个自学成才的设计师,没有上过大学,现在在纽约从事设计工作,很令人钦佩。 其实这篇文章写了2年多了,早已经有人翻译过,但这对于我来说,并没有影响,我想借着自己翻译的过程一边深入了解一些设计师的态度和看法,也顺便补习下自己那早已忘得差不多的英语。   —  以下是文章的译文(人生首翻)—  最近我的文章收到很多的反馈。(非常感谢!)。有人赞赏我文章那些宽泛和另类的选题,也有些人问我为什么不选一些实实在在关于设计的主题——比如说“如何解决用户体验的问题等等”或者“如何创建完美的响应式网站。”——这是个合理的问题。   当我开始写文章,大部分时候我都是为了自己写的。我不喜欢撒谎,不管是对你们还是对我自己。我许诺过,自己要做一个十分真诚的人。   我不想谈论关于用户体验的难题或者例如如何建立一个完美的网格系统之类的话题,是因为我坚信这真的太无趣了。诚然工具和技巧很重要,但是这无法让你面对一个更大的格局时成为更好的设计师。   在我有记忆以来,我从没读过任何关于设计的书籍,也没有关注什么设计博客,也几乎不读设计杂志。   这只是我个人的方式,但这是源于那个还没人真正想明白的信念的基础上的。   我承认有些时候我会错过一些网站设计的最新趋势,同时我的快捷键目录本来可以更大一些。   对我来说,努力去成为一名更好的设计师意味着去努力成为一个更好的人,是的,就是你听到的这么俗气。不论你是做广告设计还是产品设计,每一种设计师都要应付一大堆不同的难题。但无论一开始摆在我们面前需要解决的难题是什么。到了最后每个设计师要面对的都是人的问题,   如果有一天,我开始去了解设计行业之外的世界以寻求灵感和创意,或者开始阅读关于哲学,心理学,艺术或者自然科学等等其他领域的书籍,那个时候,我才能成为更好的设计师。   如果有一天,我不再只一味地与设计同行交流,而开始结交很多不同行业的朋友。同时,我也开始意识到不管在哪个办公室工作,坐在我身边的不再是设计师的时候,我才能成为更好的设计师。   在认知心理学领域有一个名词叫“确认性偏见”。它的意思是说,人们总是倾向于同意与我们意见一致的人的意见,人们倾向于结交和自己观念想法类似的人,这会让人们感觉更自在。   作为设计师的我们,具有更强的确认性偏见。我们不仅自豪于持有自己的观点,而且总是抱有很强的主观看法然后去争取同行对自己一致的认同。   这会导致我们这些设计师给自己创造了一个透明的隔离泡。我们参加那些只有设计师的会议,听些一样的演讲,看一些设计师写给设计师的杂志,和一群设计师交流,这就好像把我们自己隔离在了只有设计师的一个圈子里。   我们的视野会因我们自己的局限而受限。这一切的唯一好处就是避免了其他设计师和我们的想法与理念产生矛盾。这似乎会让我们感觉更自在和享受,但这其实是个看似愉悦的陷阱而已。   … 继续阅读

用户体验中的“动机理论”

大部分设计师都希望自己的产品可以获得用户的认可与喜爱,在产品上线之后,他们会通过各种渠道获取用户反馈。我不否定用户反馈的重要性,但是产品上线之后我们才通过用户反馈判定产品的好坏已经迟了。在产品上线之前,甚至在产品处于设计阶段,我们就应该对这款产品的前景有一个较为清晰的认识。当然要达到这种”未卜先知“的境界,我们要做到对用户足够了解,知道如何驱动用户使用你的产品。接下来我们将从用户体验的角度来阐述动机对设计的影响。   什么是动机? 动机是一个心理学术语,这个概念解释了人类在特定环境下做出特定行为的原因。 简单来说,动机是人类行为的内在动力。动机的产生和生理、心理、社会关系以及认知水平都有着极大的联系。动机主要有以下三个特征: 激活 — 做出决策,制定目标; 持久度 — 动机所驱动行为的持续时间长短; 强度 — 对于完成既定目标的渴望程度。   为什么设计师要懂得用户动机乃至用户心理学呢?因为了解用户动机会帮助我们更好的了解用户期望和用户痛点。你设计出来一款app,很实用,你有信心用户用了一次后就会立马爱上它。但是前提是“用户使用了一次”。在当前产品高度同质化的时代,在保证产品功能性的同时能够在包装上给用户足够的吸引力,这是首要的也是最重要的渠道来诱导用户使用你的产品。   内在动机和外在动机 动机分为外在动机和内在动机。我们将外部因素激发用户特定行为的倾向称之为外在动机。大部分情况下,我们可以将外在动机视为寻求奖励,奖励可以是有形的(金钱、奖品、文凭、证书、奖杯、奖章等),也可以是无形的(表扬、支持、认可等)。竞争本身就是外在动机的一种典型表现,那些好胜心极强的人并不是真的想要那些奖品,他们追求的一种认可——我比其他人更强。   外在动机已经成为了很多用户体验设计师的研究对象,并且已经应用到了很多互联网产品中。例如,你成为了优酷的黄金会员,你就可以比别人更早看到《神探夏洛克》的上映;你在扇贝里背单词坚持了100天,在朋友圈晒打卡记录炫耀;你的作品上了UI中国的首页,受到大家的一致点赞。以上的所有一切都是外在动机在用户体验中应用,提升用户黏度。   内在动机是指内部因素驱使人做出特定行为。内在动机来自人的内心世界,由一个人的希望和需求所形成。当人们的基本需求得到满足以后,如食物和住房,他们就会希望满足更高级别的需求。尝试新事物、接受新的挑战、最大化自己的潜力,这些都是人类的天性。学习了一门新知识或者掌握了一项新技能,我们会从中获得成就感。所以说内在动机可以归结为追求更好的自己。   在用户体验中,我们所说的内在动机是指用户使用产品是因为产品本身激发了他们的兴趣和欲望,存在于用户内心而非依赖于任何外部力量驱动。比如用户跑步的时候打开“咕咚”,背单词的时候打开“扇贝”,驱动他们的主要是追求更好的自己(健康的身体,更好的外语)。当然不排除截图发到朋友圈炫耀这一外部动机了。与外部动机相比,内部动机更能留住用户,真正想学英语的人坚持的时间肯定要比只是想晒朋友圈的人要长。当用户真正被内在动机驱动的时候,使用这款产品本身就是最大的享受。   通过设计建立用户动机     用户喜欢玩贪吃蛇主要是争强好胜和赢得奖励的外在动机。用户可以将自己获得的成就分享到社交网络,外界的鼓励和赞赏是触发用户持续使用的重要外在动机。   海底世界百科全书基于用户渴望新知识的内在动机。高质量的引导页设计会提升用户对这款应用的期望值,他们的使用欲望也会增加。   Toonie Alarm包含了内在动机(坚持按时起床)和外在动机(获得起床小能手称号)。   Upper看重的是用户渴望提升工作效率的内在动机。   合理的文案选用也会刺激用户的使用欲望,向用户宣传使用这款产品的好处、能取得的成果和完善的辅助服务。   … 继续阅读

浅谈引导页设计

老子曾经说过,“千里之行,始于足下”,这句话告诉了我们一个再简单不过的道理:再远的路只要一步步的去走,终会有到达的那一天。两千多年过去了,这句话同样适用于当前的互联网行业。 作为设计师,我们一直希望自己的产品可以给用户提供最好的用户体验。拿app来说,他们对这款产品的第一印象起始于引导页。第一印象产生的时间极短,但是它所带来的影响却要长远的多。如果说给用户构建一个完美的用户体验体系是我们的“千里”,那么引导页就是我们“足下”的第一步。所以一款app的引导页对于用户和产品之间纽带的建立是十分重要的。   什么是引导页? 引导页英文Onboarding原文意为新员工的入职培训。这与我们使用一款新app相类似,人们尝试新事物过程中会产生紧张与不安,引导页的作用就是短时间内让用户对这款产品有一个大概的了解,缓解用户的焦虑与不安,让用户更快的进入使用环境。   引导页的三个基本功能 引导页可以做的很简单,也可以做的很复杂。但是再简单的的引导页也必须有三个功能:问候、传递信息和提升参与度。   问候 引导页是用户和这款app的第一次接触,她的作用相当于向用户进行自我介绍和问候。当然问候不意味着我们要真正写一个“Hi”或者“用户,您好”,有的时候一个吉祥物形象或者字符也能向用户传递问候。问候和介绍要尽量的简短,不要分散用户过多的注意力。   传递信息 这是引导页对于用户来说最重要的一项功能。优秀的引导页用户浏览后会对这款app的核心功能有一个大致的了解。此外引导页要起到操作说明书的作用,告诉用户如何快速上手操作,这会降低用户首次使用时的学习负担。 当然“用户的时间是有限的”,用户对于引导页更多的是一瞥而过,不会投入过多的精力。短时间内用户能从引导页中获取的信息是极其有限的,这意味着我们必须对引导页的内容做一个优先级筛选。只有真正重要的内容才能放到引导页中。   提升参与度 我们不仅要了解用户,也要让用户了解我们,要建立用户对于产品的依赖度。引导页通过展示产品的价值和功能,可以在用户心中建立对于产品的一个高期望值,而这高期望值会抵消首次使用时可能出现的负面情绪,保障用户不会在短时间内把你卸载。另外出彩的引导页会极大的提升新用户对于产品的好感,人类毕竟都是视觉动物。   引导页设计要素 不同的app有着不同核心功能和目标用户群,其引导页的框架与内容也是不一样的。但是每一款app的用户体验立足点却是相同的:用户需求、用户期望、产品性质、经营目标。引导页作为用户使用app的出发点,我们的目标是以一种动态的,易懂的和有吸引力的方式告诉用户这款app的基本信息。 引导页一般有3-4页,主要有图片、文字和动画组成。   图片 大多数人对图片的感知速度要比文字来得快。无论是拍摄的照片还是手绘的插画都可以充分的完成传递信息的功能。所以引导页中图片的合理使用会帮助用户在短时间内充分的获取信息。当然引导页中对于插画的要求不是很高,简单的iocn类插画也同样出彩。插画对于低年龄段用户来说有着巨大的吸引力。特别是对于青少年来说,他们很喜欢带有插画的引导页。   文字 对于引导页来说,文字是占主导地位的。引导页中文字要足够的简明扼要,降低用户的阅读时间。有的时候将一个长句子缩写成一个短句是比直接写一个长句要更加困难的,因为你必须学会从长句子中提取重要的信息。用户不会在引导图上花费很多时间,他们不可能一字一句去读,所以文字要尽量短小精悍。   动画 引导页用户虽然不会给予过多的注意力,但是这并不意味着我们可以降低对引导页的视觉审美要求。引导页也要做的足够用心,要好看并且有吸引力。动画的应用可以给界面注入生命力,增加界面活力。有趣的动画可以很好的娱乐用户,这会提升他们对这款app的期望值。引导页中有些信息是比较重要的,采用动画我们可以将用户的注意力吸引过来。但是动画另一方面意味着更多的加载负担,更长的等待时间。所以对于动画的应用,设计师应该和开发进行深入的沟通务必达到最优的实现效果。   跳过选项 另一个我们需要考虑的要素就是是否要给用户选择跳过引导页的选项,因为不是每一个用户都愿意看这些引导图,即使是第一次使用的新用户。当然是否给用户跳过选项要根据对目标用户群的调查和分析才能做出决定。   总结 这是一个内容为王的时代,用户真正关注的是页面中的内容,这款app究竟能给我解决什么样难题,我通过使用这款app会带来哪些便利。用户对于界面样式的关注度不是很高,淘宝客户端更新了,采用了最新潮的渐变色,但是很少有用户在网购的时候会注意到这些。所以客观条件决定了设计师在内容页面中无法进行更多的改进与创新,引导页因为其巨大的包容性成为设计师发挥他们天马行空想象力的舞台,也是产品彰显其独特魅力的渠道。 相关专题:《设计眼前一亮的APP引导页》   作者:王M争 … 继续阅读

Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)

背景介绍 微信朋友圈,一个神奇的地方,如同生活中的另一片大陆,在那里总是会有你感兴趣的地方,在不同的人眼中,朋友圈是不一样的,在产品人的眼中,朋友圈充满了许多的设计亮点,领先的产品理念,一个朋友圈包含了人性、群体、社交等多种考虑。 功能介绍 实现朋友圈的图文发布效果,包括相册选择图,朋友圈的图文删除等功能,以往都给大家共享源文件,这次就不分享源文件了,(小伙伴们自己努力实现效果吧,最爱海贼) 1、利用中继器实现图文展示,并可上下滑动 主要用到了中继器如何添加行,如何显示数据,动态面板如何实现上下滑动等。 1.1、效果预览 1.2、实现原理 拖入一个中继器,根据朋友圈的布局,添加中继器中的元素,并填充数据,具体实现步骤如下图所示: 数据填充之后,返回浏览,发现中继器显示的仍然是默认内容,那是因为我们尚未设置中继器的相关事件,中继器只有设置了每项加载事件,才会显示相应数据内容,设置方法如下图: 设置完成后,再返回浏览,发现中继器中填充的数据已经成功显示,那么列表内容众多,一屏幕显示不完,必须可以上下滑动才可以,这时候就用到了动态面板的一个属性,鼠标右键点击动态面板,在弹出框中依次选择滚动条>自动显示垂直滚动条,设置完成后,滚动鼠标滑轮,即可实现页面滚动效果。 2、实现点击右上角相机图标,弹出功能菜单 这里主要用到了动态面板的一些属性效果 2.1、效果预览 2.2、实现步骤 首先拖入一个动态面板,命名为d_cover,设置三个状态,分别为change_photo(选择图片)、photo_list(相册列表)、push_photo(发送图片),具体如下图。 默认d_cover隐藏并位于最底层,点击右上角相机图标,显示d_cover,并置于最顶层,点击取消,隐藏d_cover。(n1,n2,n3,为楼主测试所用,可以不用理会) 3、实现相册选取图片,并展示到发布页面,点击发送,添加新的数据到中继器中,实现最新添加的信息排布在最上方 主要用到了选中/未选中,全局变量等 3.1、最终效果预览 3.2、实现步骤 首先创建三个全局变量,命名为num1,num2,num3,分别对应乔巴,索隆,乌索普。设置变量初始值为:0,默认规则:0为未选中状态,1为选中状态。 设置选中按钮的事件 设置完成按钮的事件,将按钮的点击结果传递到发布页面(注意,只能选择两张图片) 设置发布按钮的事件,实现最终信息的发布 信息发布后,实现最新的信息排布在最上方,这里用到了中继器的排序,添加一个根据时间的排序。 DEMO 原文地址:woshipm.com

从零开始设计一款APP之如何做原型图

Low-fi,即低保真原型图,整个APP设计阶段,设计师真正开始上手的环节。待PM制作好PRD文档和逻辑流程图之后,交互设计师开始依据已有的结论,画出Low-fi。 Low-fi的作用 1. 方便团队进行方案的讨论和统一。 就像使用场景Scenario和用户画像Personas,团队每个成员脑海中所理解的都会有所不同,但通过PRD,咱们可以进行至少是大体上的统一。而在这基础上,APP的具体画面和流程,每个人都有自己想象的视觉效果。Low-fi就在此时起了相同的作用。 当然统一的进一步促进效果是,进行后面核心功能的深入探讨,将概念落实到实施方案,并验证逻辑上是否能跑通,以及主页面元素的确定。 2. 方便开发人员进行整体架构的布置,开始着手一些基础元素的部署。 3. 做出demo进行内部尝试、小范围的用户调查,一般会有一些更改,不会影响项目主方向,大多是功能上的调整 Low-fi 的处理工具与文件要求 作为交互设计师,在Low-fi阶段多使用的是sketch,PS更侧重于用来做图片的处理。出发点还是更多的从效率上进行考虑,sketch运行速度非常快,文档小,测量距离方便,可复用的图层组(symbol),做好图之后导出多倍图也十分方便。所以在此阶段做草图,sketch是不二之选。 然而,对Low-fi的文件处理也有一些要求,主要分为视觉效果和文件名整理。 视觉效果上倾向于使用黑白灰无色彩感的设计方案,目的是为了降低视觉上的干扰,让设计师和团队其他成员,将精力重点放到APP本身的功能完善和逻辑完整上面。 而文件名的整理主要表现在图层命名需要规范。统一的控件用symbol进行管理,symbol的命名建议使用驼峰式,即每个单词间没有空格,每个单词首字母大写(这里说的是大驼峰式,即第一个单词的首字母也大写了)。 Symbol 的分类主要有这几类:StatusBar、Keyboard、Header、Button、Cards、TabBar、Control、ListItem、Popup等,如果想细分也可以再进行一些细分,比如Popup可以再分出一个细枝为Toast等。 icon类的只能用小写且不能以数字开头,不能包含空格。对于 icon,建议对通用模块再分子类(例如:icons/topnav/; icons/tabbar/; icons/general/…),原则是分类非常符合常识,到了后期icon类的symbol 会非常多,这样方便快速从一堆 icon 中找到它。 对于Sketch的group管理,建议按照功能模块进行分类与命名。比方说,video中有VideoPlayer和SingleVideo不同种类,game有GameScore和GameReport等,按照不同的用途进行重组。 这样的目的是为了,在接下来用一些动态原型工具,比如Flinto或者Origami等等时,方便查找,以及合成图层组。绝大部分动态原型工具,都是靠渲染图片来进行展示原型的,图层越少,电脑效率越高使用越流畅。 文件在Low-fi阶段整理地越清晰,设计师头脑越清晰,High-fi阶段越省力。 总的来说,在Low-fi阶段是定主体功能和APP雏形的阶段,在这一阶段,设计师需要帮助团队统一APP的整体架构,页面的大体功能模块分类和跳转关系,让APP从大家脑海中的形象落实到真实的视觉效果中。 当项目进行到Hi-fi阶段时,设计师会同PM一起开会,经过立项阶段,走过Low-fi过程,来到Hi-fi的这一步。在这一系列的相处过程中,大家会遇到问题,然后解决问题,会产生摩擦也会一笑泯恩仇。 注:Hi-fi 是高保真原型图 这节主要集中于讲Hi-fi的主要内容和与PM相处之道。 1. 角色定位与交流主旨 交互设计的角色是帮助、协助PM一起完成产品,不是画设计图,也不是切图,而是帮助团队一起经历产品从0到1的整个过程。为什么会在开头强调这个事,这个决定设计师对自己作品的态度,不是完成任务,作为交换工资的筹码,而是倾注自己的激情与心血的作品,是自己的一个代表面。 而交流的主旨呢,不是从气势上压倒对方,证明自己的做法是对的,或者说显示自己多么聪明,而是帮助PM,帮助团队顺利完成产品的开发,产品好,团队好,对方好,自己才能更好。这就是一种双赢的思维吧。 2. 工作内容的交流 与任何人的工作内容都包含两个方面,一方面是对方向你的信息输入,另一方面你给对方的信息输出。 … 继续阅读