首页

如何做一个让人闻风丧胆的 H5?(内有干货)

用心设计

动画新手有的时候会天马行空想到一些奇怪的效果,可能会不符合整体设计风格,可能会违反现实物理规律,有自己的想法,还要和产品设计确认。比如这个页面:

如何做一个让人闻风丧胆的 H5

UI设计需要什么样的美术能力?

用心设计

在聊美术需求以前,我们先来聊一个跟绘画有密切关系的东西:素描

 

6个技巧帮你把IOS的UI转换成安卓!

博博

想适配两个完全不同的平台,有哪些需要注意的点呢?今天这篇文章总结了6个值得新手学习的地方,包括图标、屏幕密度尺寸、设计等等,来收吧!

111.webp.jpg

1. 不要转换

你不应该在安卓上使用同一套规格的UI。iOS有一个能让你一键返回桌面的“物理home键”。然而,安卓上的按键是“返回、home和多任务”。

这意味着什么?

一位安卓用户可以从一个应用轻松跳转到另一个应用。这是一个很大的不同之处。

222.webp.jpg

因此,iOS通常会有一个结合了纵向和横向的UI结构,但安卓则更偏向于纵向。

640.webp.jpg



产品经理和设计师应该了解的几何设计学

用心设计

今天我们来聊聊如何理性的进行设计,谈谈产品经理和设计师在工作的过程中怎么样把几何学融入到作品中。几何设计学的由来设计本来就是一种理性的科学门类,审美因人而异,只有言之有理的设计才能说服别人,运用几何学的手法就是设计师的利器之一,科学的设计并不会限制你的创意,它只会帮助你的作品成为精品的必要手段之一。

从古至今,人类从自然界中得到过无数的启示,其中就包含黄金分割。这个从贝类完美的生长方式中提炼出的曲线,改变了所有人的审美。

Image title

写在中秋-希望能给所有的用户超凡的设计体验!

蓝蓝

这是2015年的中秋节,我在家里,看书,吃水果、月饼,看视频。与家人欢度中秋。

上午的时候,看了罗永浩、周鸿袆等人关于用户体验的见解。

关于用户体验,大致的认知是一种超乎寻常的,记忆中给用户留下的闪闪发光的事件。一种明显高与同行业水准的卓越水平,这水平不是单一方面的,而是整体的协调力,团队的成果印象。

作为一个注重用户体验的设计公司的设计总监,我常常觉得如逆水行舟,不进则退,学无止境,能人高士许多,时间有限。

希望能给所有的用户超凡的设计体验,带给客户超值的设计和作品。能够使大家满意、开心!

互联网和软件产品用户体验的十个点:

互联网和软件的产品体验包括两个方面,一个是页面级的体验,另一个是业务级的体验。关于页面级的,是我们ui设计能做的,关于业务级的体验,和页面没有什么关系,是产品经理要做的事情。产品经理与ui设计通力合作,才能创造出卓越的产品。

页面级的体验:
页面关系
框架
模块
元素交互
视觉效果
业务级的体验:
场景
业务流
功效
素材设定
品牌支撑

也许实际上并不止这十个点,而是数量众多的点,共同组成了一个良好的用户体验。



什么是好的用户体验?

蓝蓝

说今天是一个体验为王的时代,一点也不过分。





做大众消费品的人可能已经感觉到,今天消费者的话语权越来越强,如果你的产品做得好,不久就会口口相传;如果你的产品做得烂,不久就会骂声一片。所有这一切在过去是不可想象的。但今天,每个人都可以发布信息,每个人的声音即使弱小,也总能被别人听到。在互联网时代,产品是否能够成功,用户体验越来越变成一个关键,用户买了你的产品,并非是与你结束了交易。恰恰相反,当用户拿起你的产品,使用你的产品的时候,用户体验之旅才真正开始,而用户的体验之旅是否愉快,将直接影响到你的口碑,影响到你的销售。

产品经理罗永浩:对用户体验的探索没有尽头

蓝蓝

极客公园创始人张鹏与锤子科技「产品经理兼 CEO」罗永浩进行了一次深入的访谈。在这场接近三个小时的访谈中,我们有很长的时间是在讨论 Smartisan OS 中的各种产品细节和用户体验。我们发现老罗熟知每一个产品细节的来龙去脉,一个产品决定背后有怎样的考虑、经历了怎样的取舍、未来会怎样进一步优化、有哪些突出优点、还存在哪些遗憾,他都可以对你娓娓道来。

在这次访谈中,罗永浩详细地阐述了自己对产品经理职责、素养、原则和重要性的看法,并辅以清晰明确的案例分析。极客公园对这些观点整理如下:

「交互体验问题,其实都是微妙的心理和生理问题」

实际上,罗永浩的产品经理生涯要远长于锤子科技仅仅两年出头的历史。对用户心理的重视和揣摩,是老罗一直以来极为注重的东西。发现用户潜在的心理需求并加以满足的过程,贯穿了老罗的整个创业史。

从创办英语培训学校开始,老罗就经常在各种公开场合强调读懂用户心理的重要性,他乐于推荐相关书籍和分享自己的实践经验。「一块钱听八次课」的传播策略,和「给厕所隔间加装门板和锁」的人性化关怀,至今仍被人反复提起。老罗对用户需求的准确定位和对用户体验的创造性改进,从那个时候就已经成为广泛传播的大众话题。

交互案例实战!三个按钮背后由小见大的交互思考

用心设计

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

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

来源:莫贝网

初入交互设计工 作,最常见的需求就是——放按钮。放按钮看起来是超级简单的事,无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等,但殊不知其『麻雀虽 小,五脏俱全』,小小的按钮设计中也蕴含了很多交互设计的思维,当然除了设计本身之外,还能看到如何平衡开发、产品以及用户各方的需求。

所以,本文章会通过三个真实但抽象的例子说明工作中『放按钮』是怎么做的。真实说的是案例来源于实战,抽象就是提炼出思维但讲的场景都是虚拟的,免得透露机密。有趣的是,三个按理都和时间、时效有关。

案例一

虚拟场景:某订单页面,商品订单以卡片的形式罗列,每个卡片下方有若干操作按钮,如支付、取消、投诉等。根据规则,投诉按钮必须在订单产生2天后才可使用。

现状:目前产品线上的设计方案是,几个按钮同时呈现可点击状态,当投诉按钮处于可用时间段内时,点击就会去往一个投诉页面填写投诉申请;当目前处于不可投诉时间段内,投诉按钮点击后弹窗提醒用户:还有 XXX 时间才可发起投诉。

目标:提出这个案例时,我们希望让这个操作过程更加自然,不要让用户点击了之后才告诉用户这个功能不可用,而不要脱离用户的交互期望(如果按钮可用,交互期望就应该是实现相应的功能)。

设计过程:

最开始考虑这个案例时,我的第一反应就是如果一个按钮当前是不可用的,就应该隐藏起来,这个场景按钮还是挺挤的,明明不能用的东西为什么要放在界面中吸引视线呢?

但是很明显,这个第一感觉有严重的硬伤。首先,对于一个按钮或功能,告诉用户这个东西不可用,和不告诉用户有这个功能,是完全两码事。尤其是一个存在可用/不可用两种状态的按钮,在特定时间将其隐藏的风险非常大——你不知道这个功能的被需要度多高。

于是,我们去查阅了一下数据和之前的设计方案。首先得出的结论是,这个按钮的点击率不低(超过10%的用户,而且这个页面的总 pv 非常高),其次,以前有尝试过把这个按钮直接在不可用时隐藏的设计,但是立刻引来了大量的客服投诉——用户找不到投诉入口在哪里了。

所以,似乎数据和历史方案帮助我们排除了第一种做法,也就是直接隐藏按钮。那在不可用期间把按钮置灰怎么样?

置灰的好处在于,用户一眼就能看到这个功能的存在,同时又能知道这个功能暂时是不可用的。但是问题也来了,怎么知道这个按钮什么时候可点什么时候不可点?一个解决方案是在置灰的按钮中加上文案提醒,另一个是点击置灰的按钮后给出文案提示,但是前者似乎没有足够的空间进行展示了,而后者看起来不错……但是好像又回到了原点?(后来还讨论过一些更复杂的方案,比如最后半天置灰,更早的时候隐藏等,但我们并无法判断用户对时间点的真实感受和期待。)

所以最终的结论就是,由于当前的线上形式并没有什么致命的问题,也没有收到太多关于体验方面的投诉,而考虑到开发成本、设计成本和迭代周期,还是选择保持线上的样式不变。

感觉走了一圈走回原地?在实际工作中经常遇到这样的情况,设计师通过本能和直觉判断某些内容的体验可能不是最佳的,但经过资料搜集、自我批判、成本评估后发现,似乎保持现状是最好的做法。

总结:这个案例告诉我们,设计时不要总想着找茬,第一反应往往可能漏过了诸多细节,思考清楚再做行动。

案例二

虚拟场景:对商家或商品进行投诉之后,需要用户选择投诉原因,如态度不好、价格变动、缺货等。其中,在某些特殊时间段内,如该商品本身就是秒杀商品,用户发起投诉时则不能选择『缺货』原因。

现状:线上目前没有这个功能,即所有的投诉原因都是可选的,选择组件使用的是 picker,大概如下图的样式(最常见的就是选择时间啦)。

目标:对于『缺货』这个投诉原因进行交互处理,令其在特定时间段内(商品秒杀阶段)无法选择,并给用户相关提醒。

设计过程:

乍一看和案例一非常相似,但其实差别还是挺大的。案例一属于设计师自 发尝试对体验改进,而案例二确实明确的业务需求,需要把没有的功能融入到现有方案中。拿到这个需求时,首先看到大概会涉及两个页面可以用来设计,分别是投 诉页面和投诉原因选择页(这两个通常不会直接在一起,但是后者有可能以弹层的形式出现,当然也可能新开页面),于是闪过几种可能的处理方案。

方案一,在投诉页面提前进行文案披露,告诉用户『缺货』原因不可选,同时进入原因选择页时将『缺货』选项置灰;

方案二,原因选择页的『缺货』按钮正常可选,选择后通过弹窗提醒用户该原因不可用,并恢复默认待选原因状态;

方案三,仅设计原因选择页,在『缺货』选项内提供文案如『暂不可选』,并且置灰该选项。

详细了解需求背景之后,方案三首先被排除了。原因很简单,本身置灰就已经表示不可选了,『暂不可选』文案所表达的内容太少,既没有展示出不可选的原因,也没有告诉用户什么时候恢复该投诉选项。同时,我们得知反馈的文案会比较长,大约有十几个汉字,按钮本身的空间有限,并且直接在原因字段内拼接『暂不可选』也会有点技术成本。

方案二在流程上是顺畅的,但是和案例一中提到的类似,我们一般希望用户在操作之前就能预期到交互的结果,而不是让可选的按钮点击后出现提醒再告诉用户不可选。

同时考虑方案一,对于按钮置灰有一个问题需要考虑,可以看到无线端使用的是这种滚轮式的选择组件,其本身置灰能不能做是要打个问号的,事实上和开发沟通之后发现确实无法实现。最后,综合考虑下,还是采用了方案二。

总结:通过案例二可以看到,设计中常常会有一个最优解,但又总会因为技术成本、其他业务原因的影响去妥协,最后得到的方案也许不是交互上最佳的,但确实整体效率最高的。这也说明了,新人不要轻易对其他产品做体验分析,因为你并没有这些真实限制,所得出的结论也是空中楼阁。

案例三

虚拟场景:某些操作是有时效的,比如某个商品限量销售,如果还没有到付款的时间节点,付款功能是不可用的,那么付款按钮能否优化处理。

现状:当商品不在支付时间段内,付款按钮隐藏。

目标:不要让用户找不到付款按钮,令操作更加顺畅,可见性更强。

设计过程:

和案例一一样,这也是一个设计师自发想要改善体验的过程,正好有其他业务需要对这些页面进行改造,能否把这个按钮隐藏的过程优化呢?原因相信大家都能理解,把不可用的功能藏起来,总归不是最好的做法。

仔细查看线上的样式我们发现,这个案例和案例一还不太一样。最重要的一点是,付款的时间是有倒计时的,也就是说即便付款按钮本身是隐藏起来的,但其附近依然有文案提醒现在不在支付时间内,所以用户不太容易迷惑。

比较简单的解决办法就是,把支付按钮暴露出来,并且置灰。看来今天三个案例都和置灰杠上了。经过交互小组和产品小组的讨论,都一致觉得把不可用的支付按钮置灰更加合适,并且线上已有文案提醒说明,用户也更容易理解。

但是这个案例最后的结论有些出乎意料,首先,因为线上所有类似业务都采用了隐藏不可支付按钮的做法,所以如果这类交易要改,其他全都要改(时间成本);其次,这个按钮组件在早期开发过程中,并没有设计、开发 disable 的状态,也就是没有置灰的样式,如果要做,需要重新设计和开发(开发成本);最后,线上这个隐藏的样式已经存在很长时间了,用户大部分都其已经习惯,并且没有发生普遍的反馈表示认知困难(用户理解成本)。所以,结论还是保持线上的样式。

总结:有时候设计是对的,所有人都认可,但是依然会有各种因素前来制约。尤其在较大的产品团队,业务节奏快、需求多、上线紧,这类优化体验的工作常 常优先级不够高。与此同时,很多朋友可能会说一个按钮而已,加一个 disable 的样式又有何难?然而很多团队的流程规则导致业务工作是一条线,组件优化新增样式又是另一条线,想要一步把两件事都做了并没有想象中的容易。

怎么样,简单的三个按钮,是不是让你有些晕了?交互设计的难点常常就在于体验、产品、开发各个内容的协调,相互妥协,最后达到一个平衡的状态。由小见大,小按钮我们能应付了,慢慢就可以面对大问题啦。

如何发现移动端交互设计中的思维盲区?

用心设计

当某个功能对数量有限制时,操作的时机就变得很重要。以在app上报名班级(图1)的操作为例,假设班级容量为20人,确认报名订单时暂
时扣去一个名额库存,完成支付时完全扣去这个名额。如果当你报名班级时,名额已满,但还有人未付款,这时系统应该有什么提示?这和报名班级时,班级绝对性
满员(名额已满,且所有人完成付款)的情况处理方式是不一样的。另一种情况是,在你进入确认订单页时,名额未满,但当你按下“确认”订单,此时名额已经满
了,也应该有相应的提示。像这种对数量敏感的功能,应尽量明确地告诉用户限制条件,当前的相关状态是怎样的(未满员,暂时满员,或已满员?),防止用户进
行不必要的操作。用户若第一时间没有理解,可能需要进一步友好地提示。

如何发现交互设计中的思维盲区

别具匠心!24款惊艳难挡的IOS APP网站着陆页设计

博博

随着iOS设备的大规模普及,优质的iOS应用如同雨后春笋般层出不穷。每天都会有惊艳的iOS应用涌现,从社交媒体到隔壁老王,你会从各种不同的渠道听到它们的名字,被不同的人安利。通常,这些优质的APP都会有一个逼格不低的官方网站,经过精心筛选之后,我们优选出24个品质不错的iOS APP的官网。这些网站有的简约,有的优雅,有的好玩,其中总会有几个令人爱不释手。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档