随着网购成为了人们购买东西的第一选择，各大平台的竞争也逐渐转移到了提升用户体验感的身上。不管购买什么东西，最终都要经历下单这一流程。一个合理的下单流程，往往可以让消费者体验流畅，从而提升对平台的好感度，进而愿意长期的使用。
这是个非常值得研究的内容，最近我在优化商城下单流程的过程中，遇到了许多问题，通过不断地探究，也对整个模块有了更深刻的理解，希望通过总结能给大家带来一些启发。
下面将从目标的提出，结合案例的解说，并最终推到出结论的方式讲解。
作为漏斗模型的最终收口的购买步骤，是购买转化的关键。
但往往有些产品由于对流程没有系统深刻的理解，会有很多迷惑的操作，使得下单的流程相当混乱。我也曾经经历过类似的购物情景，经过一轮谜之操作后，我终于下完单了，但过后会担心刚才买的东西有没出错。
关于流程的优化我们遵循的原则是：先让流程合理了，再提高用户每步操作的效率。
怎么理解合理，必须解决以下两个问题，整个下单流程涉及到哪些步骤？步骤之间有什么逻辑关系？
我们需要洞悉到流程之间是如何串连，信息是如何层层递进并最终达成目的。因为只有每环节解决了对应的问题，流转到下一环节才能更省心。才能避免信息的反复确认，影响操作的效率甚至引发出错。
可以拆分成三个维度考量，第一是页面布局的重点突出的提效，第二是信息展示直观的提效；第三是交互操作简化的提效。清晰的页面信息传达能让用户清楚并了解自己的操作结果，并快速做出决策。
下单流程按需要提交的信息进行拆分，一般下单需要先确定商品（一切影响商品价格的因素的确定，如规格）；其次是订单信息的确认（不影响商品价格，是订单层面信息的确认，如收货人，备注等），而后是订单支付，支付方式的确认。
最后是订单进度的跟踪。这里列出的每一步前提都是上一步内容的确定。只有这样才能做到环环相扣，并且信息流转。
你是否遇到过在逛商城时看到某个服务，想购买时，进入的详情页却没有价格，然后需要你点击咨询客服，打开了一个咨询窗口
卖东西不标价，你卖个寂寞吗？
作为用户的我难免会有浪费老子时间的负面情绪出来，撇开一些特殊情况说，一个详情最重要的两个要素是商品信息和商品价格。因为了解商品的目的是购买，购买的决策需要价格的支撑。
这是一对不可分离的组合，没有价格的商品陈列和没有目标指向的价格都是没有意义的。
那么总结一下：商品详情必备的两个信息：
满足了必备元素展示后，我们还要考虑元素的放置位置，首先是突出重要的元素，其次是浏览顺序符合用户场景。这样才能真正做到提高下单效率，我们来看看下面这个例子:
京东的商品详情作为购物电商商品详情的代表来说一下，可以看到视觉浏览路径是非常流畅的，明确的实觉引导和操作指引，先看价格，再选规格，而后点击购买。
权大师的商品详情虽然页面中这重要元素都非常醒目，但它却没有让用户的决策提效，我猜测费用总计为什么放在这个位置，是希望用户直观看到选择不同的服务项目对应的收费的变化。
可是也忽略了金额作为重要的元素，当用户进入详情需要第一样看到，导致浏览路径有点绕圈圈。
携程的详情可以说是权大师的一个优化，同样的考虑，头部不仅展示了重要的价格和商品信息，给到用户购买的预期。在规格选择后，预定按钮旁边还展示商品的总价。减少用户来回查看金额的不便。
在购物中，选择商品或者服务的规格是一个常见的操作流程，选择规格的目的有：
以上几个选项，根据不同的业务会有不一样的描述，不过可以概括两个内容，一是影响能不能买，二是能买的话不同规格的选择怎么影响商品价格。
图像化选项，比如颜色外形等规格有图像的描述就更加直观。如果换成文字的话，用户的生活经验会影响对文字解读的结果。
数值化选项，这样不需要选中再查看总价来判断金额的变动情况。很方便地不同选项的价格，方便对比然后选择。
通常门票或者酒店的规格选择会用上面这种方式展示，同样的道理，把不同项目的价格列出来，让项目之间的对比更直观。
下图的例子中参考身高这一项规格说一下，身高的规格本来就是有规律的，比如从矮到高，或者从高到矮。
如果我选择红色规格衣服，身高规格最后两项灰掉了，这时就算我不看具体身高规格是多少，也大概知道红色衣服身高最高的规格没货了。
这时，我想找一个有170cm身高的衣服，我就会不断切换颜色规格，用视线的余光去看什么时候170cm的规格亮起来。规格的展示通过位置和内容的支撑，能让用户更快速找到变化的差异。
不影响商品价格，是订单层面信息的确认，如收货人、备注等。
第一步说的是商品信息的确认，这一步是订单信息的确认，这两个维度怎么理解呢？
举个例子：比如你到商场买东西，你首选是挑选好要买的商品放到购物篮里，再到结算台支付。
这时候你是有个比较清晰购物列表在脑海中的，因为在挑选时候已经经过判断，我拿了一个薄荷味的牙膏，还拿了一个潘婷的洗发水。现在只需要把这些给到收银员，她再确认一次就可以了。
但试想如果在你的结算的时候，有个小孩把你购物篮的东西搅乱了，放了一些别的商品或者拿走了其中的一些商品，你在收银台这里就会变得十分混乱。我又得重新确认一下自己要买的东西是什么。
订单的确认是建立在商品的确认上的，而且步骤之间本来就存在了递进的关系。先确认能不能买，再考虑能买的话收货人等订单的信息。在这一步，确认的信息尽量不影响商品的单价。
淘宝这个例子的话，订单确认的页面需要确认收货人信息、数量、配送方式、运费险等，这几个元素都不影响商品单价的，都是订单层面的信息确认。这就符合前面所说的，页面信息层层递进，减少相同信息反复确认的原则。
飞猪买门票这个流程中，从详情页到规格选择到订单确认，门票类型始终可以选择，到最后填写订单了，还是可以选择不同的票种。
这操作有点迷惑，前面都告诉我了当前选择了成人票，到最后还告诉我，你还可以选择要一张学生票噢。最后确认下单信息要把商品信息再确认一次，这就是影响下单效率的表现。
支付的确认也有两个重要的元素，金额和支付方式的选择。
但也有的商城也会做成下面右图，在订单确认页面把支付方式也一并选择了。
表面上简化了步骤，但由于不同步骤确认的突出的信息是不一样的，如果我选择支付，那在支付前我必定会关注金额。所以右图这样就没法让突出重要信息，需要费劲地找一下金额是多少。
订单的详情页里包含的信息有：商品的信息、订单的信息、支付的信息、订单进度的信息。这个环节，订单的进度信息无疑是重点。
对信息展示优先级排序为：订单进度信息 > 商品信息 > 支付信息 > 订单信息，淘宝的订单详情按重要程度自上而下排列：
有的商城甚至会把一些权重低的信息收起来，如订单信息、支付信息。想查看时候可以点击查看更多信息，这样做的好处是能让界面整体更清爽，降低页面的复杂程度，那么对重点信息的抓取就更快速了。
对订单办理的进度展示优化，我认为淘宝可以说是个经典的案例：
以上改动都是让订单进度掌控的体感更加丰满的过程：
以上进度展示的关键点可以概括为：当前进度、整体流程、完成的预期。有了以上三点，用户对于整个进度的才能有一个清晰的把握。
在订单流程设计各环节中，如果我们明白每一步的操作的目的，提炼出关键点。那在优化中就能更加得心应手。如果发现本文有什么逻辑的错误，欢迎大家指正，一起进步。
下面附上本文的知识目录：
文章来源：人人都是产品经理 作者：小圈学产品
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享一波APP产品体验日记，看看别人眼中的APP亮点是什么？不足处是什么？有哪些可以让我们在工作中优化借鉴的呢？一起来看看产品体验日记4.0吧～
越来越杂食了，开始胆敢加移动端外的产品体验了，以后日常生活例子估计也能拿来凑凑数~
奥卡姆剃刀原理
微信转账提示金额数位这个功能其实出了蛮久，不过最近才发现一个小细节。就是百千万这样的位数提醒，只有超过千时才会出现，左图500块是不需要的，因为百位算日常生活非常常用的数位，用户识别速度快。即使是小功能也要做到尽可能克制，如无必要，勿增实体。
紧跟热点，保持触觉
追热点不仅仅是广告媒体的事，设计师也应该保持对外界的关注。可以适当留意贴合品牌调性的实时热点将他们运用到产品中。“拍一拍”这种轻松幽默的调性很符合开眼推送的整体感觉，用起来毫无违和感。偶尔能给用户制造小惊喜，增加趣味性。
快速触达，原路返回
在中文处点击评论图标，可以快速定位到底下的评论区，很好满足了一部分浏览正文关键点同时看看其他用户评论观点的需求。再次点击也能回到上次看到的位置继续浏览动作。
调动用户情绪
作为内容产品，文章也是内容生产不可缺的一部分。如何让用户生产高质量的内容，提高平台内容质量。左图评论发布的暗提示文案“优质评论将会被优先展示”，提醒了用户用心组织评论的价值是会被优先展示，展示评论等于满足了我们需要被“看见”的心理需求。
右图如果用户进行点赞，只要手速快，界面会随着连续点赞次数的增加不断变换动画效果，各种表情蹦出和连续点击次数如“48”会持续刺激用户进行点击，也使用户点赞得到正向反馈，增强下次的点赞欲望。用过调动用户情绪达到目的。
定制化内容
无论是feed流文章还是评论，用户都可以关闭自己不喜欢的内容，甚至举报！举报机制如果仅让平台审核工作量巨大，通过用户举报再审核可以筛选掉很大部分，减少运营成本。而纯粹因不喜欢关闭，可以给用户贴标签，使平台推算更精准。不得不说国内的内容产品几乎只让我们看到自己感兴趣和认同的观点，时候让我们活在的同温层中。
差异化品牌元素
如今产品同质化严重，虽然战略、范围层能决定产品的差异性，可不是设计师能左右的部分。回归到日常工作中，差异性更多可以表现在界面表现和交互上。绿洲作为一个年轻群体的内容社交平台，年轻、有趣是主要的用户特性，结合自身品牌基因，将仙人掌和沙漠等其他相关元素运用到了界面的不同地方，增加了产品趣味性又强调了品牌感，跟其他产品拉开了差异。
分享动机
分享作为引流的其中一个手段，怎么引导用户进行分享是每个产品想增张都需要思考的。这里分享他人的动态可以选择生成海报，海报模板可以更换样式排版，用户可以根据自身人设选择相应的分享海报风格，塑造人设。这满足了用户需要被看到甚至被认可的人性需求。表面上是分享一张海报，一款产品，实际是自我价值观的曝光。
明星效应
利用明星的粉丝效应和热点可以很好的吸引用户，产生情感连接。通过不消小红点不舒服的强迫行为让用户注意到明星的入驻，当然这可能产品甚至更高的范畴~（这里的小红点被我按掉了手动补一个）
品牌感&差异化
一零零一是一款以猫为品牌形象的漫画阅读产品，除了常见的加载，空页面和引导页等地方出现小猫的品牌形象，很多页面也用了同样的视觉元素加强品牌感。多个地方出现的元素如何做到提现相同的品牌要素而不重复，这里主要提取了主形象的关键因素比如猫耳朵，猫爪，尾巴，毛线球等有辨识度的独有视觉元素。
逻辑清晰，操作轻便
极简汇率是一款货币换算的小工具。印象中这种工具逻辑可能是一个搜索框，输入价格，搜索框左边可以选择货币，然后出来一些不用货币换算结果，比较普通。然鹅这里的逻辑是展示常用的6种货币，直接显示他们的相对价值，因为一般用户换算需求最多就几种。要切换只需点击对应的币种比如RMB，下面即可输入并实时显示换算结果。
因为下方键盘常驻，没有收起和展示的过程，整体上更直接也减少误触收起键盘的可能性。（说是误触因为没有收起键盘的必要）右下角“交叉”点击删除最后一位，长按清空，细节也考虑得很周到。
元素的取舍
不同币种切换可以通过右滑实现，即使用户第一次使用，因为界面中没有可切换币种的按钮或提示，但是切换又几乎是一个必须的功能，IOS使用习惯者很可能会尝试左右滑试图找到切换功能。通过隐藏部分操作让内容更聚焦在汇率换算上。
左边界面勾选表示了选中的货币，返回按钮变成了向右箭头，暗示了界面之间的跳转逻辑，每个元素都有意义。
操作惯性&锚定效应
Geist 是一款集冥想、脑力锻炼、放松练习等放松身心的APP。新用户一进入首先会看到左边界面，通过连续回答几个明知故问的问题（正常人应该都会选是），最后抛出是否想设置提醒，由于前面用户已然形成了惯性，很可能让用户毫无察觉的设置了提醒功能~
其次当我体验完一个小游戏，选择关闭时，会有“优惠仅限一次”这种挑战用户损失厌恶心理的付费引导弹窗。值得一说的是仔细一看定价：一年费用398；终身才238？？？排除有钱任性的豪，用户对产品的定价预期会首先被一年的398锚定，然后发现永久的238相比之下简直过于良心。这种看似毫无意义的定价策略被用在日常生活的方方面面如餐牌上首先展示贵价的商品，使之后出现的低价显得更加划算。
精准定位用户
网易课堂首次使用需要选择感兴趣的只是领域。虽然这种模式并不新鲜，不过最近看到做产品要，感觉有必要再强调一下。现在算法和人工智能做的就是不断给用户贴标签，然后不断让数据库里的人更“真实”，从而让用户看到他想看的甚至帮用户决定他需要什么。如果你在电商平台搜索瑜伽垫，相关推荐是鸡胸肉，这就是理解用户。
交互层级思考
可以看到，左图是内容的默认界面，底部有点赞，评论，分享，收藏四个功能，可以说是信息阅读的标配功能。随着用户上滑时，为了一屏展示更多内容，同时提供沉浸式体验，原来右侧的三个功能分别隐藏和移到了界面的右上角（右图）。收藏增加了用户回访的可能，分享则可能带来用户增张，所以都保留到右上方，唯独评论虽然能增加内容热度，但是用户操作成本高，属于较低频操作，且如果放到右上角，不符合用户预期~
沉浸式体验
时间胶囊类似一种日记的变体，有点像小时候把自己的宝贝放一个地方藏起来多年以后再打开。有一种时光依旧的美好感觉，界面的配色除了一般日记产品的文艺感，还多了一种纸质的温馨感。为了让用户相信这种美好的想像，里面的很多文案都让人沉浸在对未来的憧憬和当下的珍惜里。
替用户做决定
相信评价APP或者叫给APP打分都见过不少，这里直接将这种需要用户思考的表述转为：给我好评，不让用户启动心理防线，红色的爱心处理除了突出了评价功能的视觉，还暗示了好评这一潜移默化的概念。
数据可视化
Yahoo天气跟一般天气预报APP类似，首先视觉上用不同气候的实物图作为背景，数据表格则使用模糊的背景承载内容，比较有临场感。每小时的天气和气温排列成高低不同的竖向矩形，矩形的高度暗示了当时的温度，从而将温度具象地表现成视觉图形更快速的进行识别。可以快速地了解一天的气温变化和幅度，搭配根据时间点变化的天气Icon（月亮和太阳），清晰直观。
预判用户行为
Halo是一款摄影和壁纸分享应用，每天都会有官方和用户自发更新的图像内容。在用户分享的内容中，用户可以通过切换顶部的：原图和壁纸，模拟用作手机壁纸的效果，右边的小眼睛还给壁纸效果中添加时间或者应用APP的实际预览效果。清晰的判断出用户将要进行的行为，减少了重新到图库设置背景逐张比对效果的时间。
降低评论成本
评论作为内容产品常见的操作之一，其成本相对点赞，收藏来说比较高，需要用户组织语言，输入文字或者表情。为了增加评论的热度，预设留言让用户自行选择可大大降低评论的成本和心理负担。通过摇筛子的方式，暗示评论将是随机、不可预测的，通过不确定增加了用户的好奇心。不过需要设置丰富的评论范本，才不至于一篇内容下看起来都是复制粘贴的发言~
制造稀缺
现实生活中，资源有限，东西不够。同样的产品，越是稀缺价格越高。本质是信息不对称，就像红酒其实大部分用户不在乎或者分辨不出好坏，但是默认贵的即是稀缺和好的。通过制造稀缺引起紧迫感，给用户造成机会难得，不容错过的错觉。
智能化降噪
说到智能化和降噪这两个词你一定不陌生，不就是AI和以内容为中心吗？可是如果将他们合并起来看，其实设计可以有更多思考的空间。谷歌浏览器的首页常用网站快捷入口，当鼠标滑到某个入口时，仅仅显示获取焦点状态，需要稍微过一秒左右，获取焦点状态右上角才会出现删除快捷入口按钮。绝大多数用户的使用场景是打开浏览器，在首页快速点击快捷入口进入对应网站，一般不容易注意到删除功能的ICON，当他们真正需要的时候，图标自然的出现了，机器仿佛会“观察”用户，再次验证了好的设计不会让用户注意到~
考虑特殊场景
很多产品设计的时候，在用户使用场景上的思考可能都会有一定的缺失。用户研究总是理所当然的按自己的理想使用场景考虑，与真实的用户场景脱节。这里语音播放的时候检测到用户的音量设置可能影响收听，友好地提示了用户，否则很可能让用户误以为没操作成功或功能出现问题，减少了使用障碍，非常贴心。
原文地址：站酷
作者：什么东东o
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
蓝蓝设计秉承设计优秀，不断超越的理念，诚信敬业、专业耐心的工作作风，一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。10余年专注努力，300+案例磨练。我们对手机 ui设计，用户体验与交互设计，各种类型软件界面设计，国际化标准和流行趋势，进行过不断的学习和实践。蓝蓝设计提供的是可以信赖的ui设计服务，我们内部有一套管理要求，比如去客户现场每周一次的检视和沟通、内部提案会议、每天下班前的整理反馈成果发邮件、随时沟通的qq、电话，阶段性的汇报和进度记录整理。多劳多得的奖励机制，客户满意度评价奖励机制，鼓励大家用心、平和、耐心、勤奋、创新的做事.
北京蓝蓝设计团队来自清华美院，工作多年，行业经验丰富，专业性很强。我们是热爱设计，设计不仅是我们的专业，我们的职业，还是我们的爱好。每一个蓝蓝设计的设计师都希望自己的设计越来越好，以高标准，敬业用心的态度、专业的技艺得到客户的认可。为此，我们不惜代价，愿意额外的付出时间、精力，去学习、去尝试、去研究、去探索。工作卖力，玩的开心。做好卓越的界面设计，成为这个领域的资深专家，帮助客户取得成功，是我们的目标。
在手机 ui设计方面，我们先后参与过一起海带app设计、词觅app设计、外卖宝贝H5界面设计、乐自由我app界面设计、赞同科技app界面设计、近邻宝界面设计、民生银行手机界面设计、快递通手机界面设计、沃安科技app界面设计、联通营业厅界面设计、Iphone手机界面设计等成功案例。
--手机appUI设计--
更多精彩文章：
要想提高我们目前的UI设计水平，最好的方法就是参考一些相关手机界面设计作品，国外现在有很多作品都非常优秀，今天设计达人网为大家分享12个优秀用户体验的手机界面设计作品，希望能给你带来灵感。
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的ui创意设计、软件界面设计、网站设计，用户研究、交互设计等服务。
蓝蓝设计秉承设计优秀，不断超越的理念，诚信敬业、专业耐心的工作作风，一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。10余年专注努力，300+案例磨练。我们在ui创意设计，用户体验与交互设计，各种类型软件界面设计，国际化标准和流行趋势，进行过不断的学习和实践。蓝蓝设计提供的是可以信赖的ui设计服务，我们内部有一套管理要求，比如去客户现场每周一次的检视和沟通、内部提案会议、每天下班前的整理反馈成果发邮件、随时沟通的qq、电话，阶段性的汇报和进度记录整理。多劳多得的奖励机制，客户满意度评价奖励机制，鼓励大家用心、平和、耐心、勤奋、创新的做事.
北京蓝蓝设计团队来自清华美院，工作多年，行业经验丰富，专业性很强。我们是热爱设计，设计不仅是我们的专业，我们的职业，还是我们的爱好。每一个蓝蓝设计的设计师都希望自己的设计越来越好，以高标准，敬业用心的态度、专业的技艺得到客户的认可。为此，我们不惜代价，愿意额外的付出时间、精力，去学习、去尝试、去研究、去探索。工作卖力，玩的开心。做好卓越的界面设计，成为这个领域的资深专家，帮助客户取得成功，是我们的目标。
--手机appUI设计--
更多精彩文章：
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
APP UI设计一直在变化，就像网页设计一样，不停的创作新鲜、友好的产品，设计师要跟上这个趋势，最好的方式就是多看优秀案例，下面大家一起来看看今天的精选，建议访问官网查看更详细的展示哦！
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
不知道各位铁子们的朋友圈是啥样，反正我的朋友圈几乎被vivo刷屏了；吓的我赶紧看了看微博和知乎这个号称 “前苹果设计师操刀” 的系统到底有什么不一样。
浏览了几十篇相关文章和报道，好评如潮，我根据这些输入总结了如下几个特性：
OriginOS参考了原生安卓、iOS和Windows 10的交互特点，将传统安卓的抽屉、桌面、小部件整合起来，按用户的使用习惯和用户行为感知形成一个叫做TimeLine的时间流动线。
在OriginOS原子界面中，vivo希望用户不再区分桌面、抽屉和插件，而是根据自己的实际需要在桌面安排想要的内容。这个内容可能是APP图标、可能是APP小部件、也可以是系统插件。总之，根据用户的行为，在桌面展示用户需要的东西。
在安卓设计规范之外，vivo发明了一个叫做“华容网格体系”和“原子组件”的新规范。这一规范可以看到Windows 10和iOS 14的影子。这一规范从生态角度来说，跨越十分激进，想做到理想化的状态，需要全行业来支撑这些组件具备更宽泛的信息展示能力。
坦诚地讲vivo属实付出了很多，在细节的追求上甚至可以跟当年的锤子有点一拼了，但站在用户体验的角度上，我斗胆泼个冷水～
Origin？这是个什么，经受了9年义务教育和4年高等教育的洗礼，我居然读不出来，是我不行还是蓝厂阳春白雪？不难看出，蓝厂另外一个号称“OS”的funtouch，我用了几分钟的时间才知道是“放他吃”啊！
对比下MIUI，colorOS和flyme已经弱爆了，更别提 “充电2小时5分钟，通话5分钟2小时” 这种神级文案了，所以我奉劝vivo放下包袱，说点人话。一个用户都读不出来的名字，又怎么谈用户体验呢？
我很是认同OriginOS的最大亮点就是华容网格，官方号称“通过不同尺寸磁贴的自由变化和放置，形成每个用户独有的行为驱动逻辑和动线设计”，极大的鼓励用户自定义桌面，表面看“用户自定义”是用户体验的，但这就好比把你抛在大草原里骑马，哪都能去，去哪都行，因为并没有一条路可以走…图图新鲜还行，但最终我还是不敢走。WindowsPhone当年的界面就是这种情况，官方动态配图看好的不行，可是对用户有着极大的审美要求，排列的不好可真是相当丑。
再有一点，这个网格系统让我想起了魅族Flyme的smartbar：
Smart bar 是魅族在旗舰手机 MX2 发布时推出的一项操作解决方案。它智能整合系统返回键和菜单键，使其与软件功能栏合二为一。“底栏”左右分别显示返回与菜单键，中间三个空位留给软件功能按钮。如果软件功能按钮过多，Smart bar会将其自动放进菜单栏。双层变单层，优先的屏幕显示区域被更好的释放，上下点击也不会出现误操作，而且界面更美观，风格也更加统一。
本身是好心，但需要第三方来适配，无形中加大了第三方的工作量，显然vivo还不具备像苹果一样的号召力来牵动生态内的伙伴来搞这个。
△ colorOS
想比OPPO的“无边有界”，vivo没有一个统一的视觉语言来Cover，你能看到三种形式“扁平”“拟物”“新拟态”共存其中，特别是今年在Dribbble流行起来的“新拟态”，完完全全的概念设计居然被搬到系统上？真是大跌眼镜。甚至你可以看得到这是 “Fluent Design” “Metro” 和 “Materia design” 的结合体，就是没有一点苹果的影子，所以说是前苹果设计师操刀，我是有点质疑的…
△ 微软 Fluent Design
以图标为例，上图展示了3种截然不同的风格，在一个设计师的眼里这可能是个设计还原的事故。我理解的设计语言应该有一个完整的世界观，像Fluent Design一样，ta是对自然世界的高度抽象和概括，并不是仅仅为了好看，反观OriginOS，一个系统里二次元和三次元搞起了暧昧，就像初音和擎天柱谈起了恋爱一样让人难以接受。
在交互方面，点击OriginOS桌面的击交互池图标，就能直接在桌面上自由调整交互形式。要知道，以往vivo每款新机都可能更换一套手势逻辑，现在OriginOS把选择权交还给了用户：用户可以按照自己的习惯，在26种不同组合当中选择更适合自己的手势操作组合。
但这又跟锤子的“大爆炸”和“一步”类似，你说这事是个问题吧，但也不是那么大的问题，导致费了大心思又获得不了市场的局面。
最有意思的莫过于双系统并行了，OriginOS和Funtouch可以自由切换，有点像我做设计不知道哪个方案更好事出了灰度大法一样。这种做法无疑让我觉着整个OS团队对自己作品信心的折扣，既然是自己认为最好的，那又何必在意批评呢，放松一点，大胆一点。
不过吐槽归吐槽，不足归不足，vivo能有觉悟来下定决心搞搞系统这事还是值得鼓励的，明显可以看得到细节上下的功夫，也明显可以感觉vivo是从用户体验的角度出发，尽量不让APP绑架用户，最大化的把刚需搬到你能看得到的地方，所以还是要给vivo一个赞！今天的发布也才是第一步，相信未来OriginOS可以做的更好！
文章来源：优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
APP UI设计一直在变化，就像网页设计一样，不停的创作新鲜、友好的产品，设计师要跟上这个趋势，最好的方式就是多看优秀案例，下面大家一起来看看今天的精选，建议访问官网查看更详细的展示哦！
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
弹窗是我们平时在设计APP时候绕不开的一个元素，选择合适的弹窗形式，是我们需要多加思考的地方，避免变成只会完善产品原型的线框美工。
弹窗是我们与机器界面进行互动的一扇窗，它是一种用户与产品直接对话的方式，它可以传达信息，反馈状态以及引导用户操作。弹窗分为两种类型：模态弹窗与非模态弹窗（有些地方可能翻译为无模式窗口）。
模态弹窗
用户需要先与其进行交互，才能继续操作。也就是说它是强制性的，用户无法忽视它的存在。确保人们收到关键信息，并在必要时采取心动。
非模态弹窗
存在一定的时间限制，通常用于系统反馈，用户无需对其进行回应。
1. 对话框 Dialog / 警告框 Alerts
出现在需要打断用户操作的情况下，可以大致分为信息下发（被动）例如：版本更新，消息通知，运营广告等。信息提交（主动），例如：修改信息，登录注册等。
通过上面几个案例我们还能发现几个特点，按钮可以通过差异化设计引导用户去点击（例如美团的版本更新），运营类弹窗一般更注重视觉冲击力，且刻意将关闭按钮弱化远离弹窗主体，背景蒙版颜色更深一点，营造更强的沉浸感。对于承载输入功能的弹窗，需要注意键盘弹出后的位置。类似系统功能的弹窗，比如清理缓存可以考虑直接调用平台的系统弹窗。
2. 浮层 Popover / Popup
通常在用户进行交互后出现，比如常见的下拉菜单，下拉弹窗等，更加强调弹窗的从属关系。（在腾讯ISUX腾讯文档的文章中使用了模态浮层与非模态浮层的概念，有兴趣可以去看看）。
同样都是下拉弹窗，但是很多产品有着不同的处理方式，微博通过暗色系弹窗来明确区分弹窗内容与背景内容，钉钉通过加深背景蒙版来突出弹窗内容，大众点评只使用了淡淡的投影，去掉了背景蒙版，使得弹窗内容与背景内容对比无法拉开，在实际体验中相当影响用户的识别效率。
3. 操作栏 Action bar / 操作列表 Action Sheets / 操作视图 Activity Views
跟浮层有点类似，也是通过用户的主动交互后唤出的功能菜单。通常出现在屏幕下方，占用屏幕比例较高，为了方便用户使用，底部会放置取消功能。（Action Sheets和Activity Views是IOS官网规范中的叫法。）
这种类型的弹窗最常见的场景就是分享模块，比起其他的模态弹窗，它能够承载更多更丰富的功能（多为选择项功能）。支付宝和微信公众号分享算是最标准的Action Sheets，为了减少用户不必要的记忆负担，弹窗高度限制较低，露出更多的背景内容协助用户记忆。
4. 卡片 Sheet
Sheet是出现在IOS人机交互指南中的一种模态窗口，形式为一张从底图出现的卡片，几乎覆盖了全部的原页面。但是未覆盖的区域也会使用暗色蒙版来帮助用户记忆暂停的任务。因为它支持上下拖动，所以比起浮层，它能够承载更多的复杂信息内容，常用于一些表格无法承载的复杂任务但又非沉浸式的情况下。
比起Action Sheets，Sheet的屏幕覆盖率更高，且更多时候承载的是信息录入型功能。Sheet需要顶部标题告知用户当前所处步骤信息，通过底部卡片形式的叠加让用户感知当前处理的任务流程为主流程的分支任务。
5. 其他补充
随着交互体验与产品技术的不断发展，如今的设备都能承载越来越多复杂精细化的模块。所以渐渐有越来越多特殊的弹窗形式。（底层逻辑是互通的）
例如网易云音乐的分享使用了沉浸式模态，多个弹窗组合的形式，还有动效引导，以此来承载自身丰富的分享形式。IOS桌面使用聚焦类型的弹窗菜单，帮助用户进行视觉聚焦。
1. 提示框 Toast
常见用于反馈用户的操作结果，反馈应用的状态改变，一般持续2s左右便自动消失，可能出现在任何位置。（不能通过主动滑动关闭）
目前最常见的场景就是各种刷新反馈信息，一般来说存在感都比较弱，比如案例中的知乎，B站和INS。比起B站和INS，微博和知乎都在其中融入了自己的品牌特征：主题色点缀，虽然只是个小细节，但是对用户的品牌感知能起到潜移默化的作用。
2. 提示对话框 Snackbar
Snackbar最早是出现在Android的一种弹窗形式，不过现在很多IOS端产品上也会出现。它有点类似Dialog和Toast的衍生，很多时候像Dialog一样可交互，有时候又像Toast一样有时间限制。通常出现在屏幕底部，由页面底部向上滑动出现，向下滑动消失。
由于目前手头木有Android手机，所以截了Material Design的官方说明案例来帮助理解。主要强调了两个点：1.不要加Icon，2.只能有一个操作项；因为snackbar及时不操作也会消失，所以比较常见运用与工具类产品，需要保持操作的连贯性。例如邮箱类产品，用户删除了邮件，snackbar可以及时反馈删除成功的状态的同时提供撤销的操作。
3. 透明指示层 HUD
HUD是出现在IOS端常用的一种非模态类型，最早出现在屏幕中间，由于容易影响用户的沉浸式体验，所以在IOS13版本中对HUD进行了边缘化调整。
对比左侧与右侧的HUD就会体会到为什么早期会被那么多人吐槽，特别是在游戏类的沉浸式应用中，很容易破坏用户的体验。
1. 展现形式
展现形式核心是分场景，一些偏向系统报错考虑使用最简单系统的弹窗展现形式，运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做，一定要让用户懂得，这是一个弹窗。非模态弹窗一般多以最简单的形式出现，避免传递状态信息时干扰用户的关键信息获取。
2. 按钮模态弹窗一般情况下只放置1-2个按钮，信息告知类型的放个“确定”，重大决策类型的放个“确定”“取消”。比较特别的是权限请求弹窗，可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上，对于用户体验上来说相当的不友好，但是对于运营数据上来说可能会很好看。
3. 动效因为弹窗承载文本量有限，得利于设备技术的发展，现在越来越多的产品会在模态弹窗中使用动态的形式传递信息，例如很多产品的功能引导。对于非模态弹窗来说，由于本身存在感较弱，动效运用于合理顺应用户的视觉动线，例如你下拉刷新后，一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。
4. 时机频率把握好弹窗出现的时机和频率
模态弹窗会直接打断用户的操作状态，一般只有在不可逆，或者操作会造成严重后果的情况下出现。但是在一些特殊的商业需求下，比如运营广告，那就得权衡用户与商业利益之间的关系了。非模态弹窗的话更注重出现的时机，反馈一定要足够及时，这样才能不会让用户在操作中产生疑虑。
5. 文案表述
由于弹窗的信息承载量非常小，所以一定要用最精炼，恰当的表述来告知用户信息或者当前状态，可以考虑使用“动词+名词”的组合短语，例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的，文案字数要更加注意（可以考虑增加一些通用icon颜色辅助表达，比如正确使用绿色打勾）。
6. 输入内容
很多弹窗承载着表单输入的任务，然而弹窗并不适合过多的表单输入，特别还有一些多到需要下拉了- -如果需要用户填写很多表单，乖乖跳转新页面吧。况且弹窗本身出现就已经中断了用户原有的操作，还要填一大堆东西的话。。（除了IOS的Sheet，它的出现就是IOS官方为了解决常用于一些表格无法承载的复杂任务但又非沉浸式的情况。）
由于目前手头目前没有Android，所以截图案例都是基于IOS端，下次有机会继续修改更新。不过目前来说两端很多交互形式越来越趋向共通。
借由这篇文章开了“设计控件”系列的坑，接下来会继续学习与分享其他的设计控件相关知识。包括之前的设计原则系列，也会继续分享设计心理学法则等等。最近一直在思考自己的学习框架，除了设计基础原则，设计控件外，还有设计模型以及设计工具等等。坑已挖好，接下来就靠自己一铲子一铲子去填了。
文章来源：优设 作者：Chinn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
通过阅读“地图基础知识及通用设计原则”，相信大家已经对地图及其设计有了一定认知，本篇我们来了解下如何实践。
Part 1. 上篇要点回顾
- 核心设计原则
符合制图学和公众认知
保证识别度
清晰有层次
细分地图模式
具有品牌特性
- 元素分类
点元素：地名、POI等
线元素：道路、地铁线、水系线、铁路线、航线、边界线等
面元素：陆地、草地、湖泊海洋、AOI等
*名词解释：POI, Point of Information的缩写，即“信息点”。一个POI可以是一栋房子、一个商铺
*名词解释：AOI, Area of Interest的缩写，即“信息面”。指的是区域状的地理实体，如医院、小区等
Part 2. 设计背景
为了实现“让出行更美好”的使命，今年乘客端新增了自驾导航。地图贯穿了该产品的全流程，且首页、路线规划页、导航中等场景用户需求都不相同。然而已有的模式，从配色到信息展现，都不符合首页地图的场景需求，于是需要重新设计。
以下详解设计过程。
Part 3. 设计落地
- 设计关键词推导
根据自驾导航的目标，拆解出了首页地图的设计目标：
构建适合自驾场景的浏览地图
提升地图体验与设计品质，提高用户满意度和好感度
打造具有滴滴品牌调性的地图
用户需求及习惯表明：在首页主要是明确自身定位、查看其他位置信息，且视距基本是手持距离。那么“构建适合自驾场景的浏览地图”关键点就在于识别度，更好的展示重点信息，保证用户读图效率。
“提升地图体验与设计品质，打造具有滴滴品牌调性的地图”的目标，可以通过视觉手段实现。在浏览场景，用户使用地图的时间不固定，为避免长时间浏览产生疲惫感，地图配色需要更舒适，对比度也要适中。这点也与自驾导航整体的设计关键词“轻量”不谋而合，于是推导出了关键词轻量化、品牌感。
- 设计地图方案
明确设计关键词后，开始着手设计。关键词中的轻量化、品牌感基本上决定了这款地图的调性，识别度则重点影响信息展现。上篇提到，设计时可以把地图元素拆分成点、线、面三类，按照由大到小的顺序设计，即先确定配色，再设计文字图标等信息，以免元素过多互相干扰。
1、设计整体配色
轻量化：传达轻量化的感受需要控制取色范围，于是我们制定了颜色使用规则（下图）。
色相：以冷色为主，医院（红色系）等具有公众认知的颜色可除外；颜色从品牌色系中选取
明度：限定颜色的明度范围，选取中间-略高的部分，平衡颜色对比度
饱和度：避免使用高饱和度的颜色，保证配色的舒适感
通过分析颜色，我们对传达轻量化的感受有了大致的把握。那么品牌感如何体现呢？
品牌感：具有品牌调性的地图能更好的融入产品设计风格，也能够区别于竞品，这在滴滴全流程的设计中都十分重要。在地图上我们主要用颜色及图标绘制表达品牌调性。
颜色：结合轻量化的用色规则，从品牌色系中选取，使地图配色与其他组件更加融合
图标绘制：沿用滴滴设计规范中的图标绘制语言，如圆角、简单形状等，拉齐视觉感受
最终根据“轻量化”和“品牌感”这两个关键词，设计出了地图配色的效果图。
2、设计地图信息
配色确定后，即可开启POI图标+文字、AOI文字、道路文字、以及各类行政区划文字的设计。
识别度：设计地图信息时，保证基本识别度的方式，可通过文字颜色、字号大小、图标绘制等实现。但是要做到清晰有重点，就要关注信息间的层次感。
以POI信息为例。回顾下此时的用户需求：了解自身定位、查看其他位置信息。从这点可以锁定第一展示优先级应为POI——地图上定位最精准的信息种类。而已有的图标识别度较弱，无法满足需求，于是我们进行了重绘。通过用色表达图标类型、首选有公众认知的载体作为表意、增强颜色饱和度及对比度，搭配文字颜色，从视觉上把POI信息提升至第一顺位。
用同样的方法，根据重要程度，通过设计拉开了信息的视觉层级：POI>道路名称>AOI名称>行政区划信息。
3、整体调整
在完成了配色和信息设计后，我们需要整合所有元素统一调整。此时，通常会出现元素互相干扰的问题，我们可以回归到场景需求中解决此类问题，按照信息的重要程度调整，最终形成完整方案。
Part 4. 设计验证
地图方案落地后，我们会关注设计品质的验证。由于地图的工具属性，验证其设计品质及用户满意度一直是行业内较困难的事情。地图既是一种图形语言，又承载了大量的信息，且需符合场景需求，要验证的内容非常多。因此我们建立了地图评测模型，从美观度、识别度、读图效率等多维度进行评测，量化地图设计品质。
通过对自驾导航首页地图的两轮调研，我们回收了大量有效结论，如用户对道路等级的关注程度、如何使用AOI信息等等。新版地图在美观度、识别度等方面均得到了用户的认可。
了解用户的声音，能更好的帮助我们深耕地图设计领域、全力推动地图体验优化。
Part 5. 未来形态畅想
当前科技发展迅速，近些年出现的HUD、AR等导航，用现实世界的画面代替了地图，不需要转换思维、记忆地图语言，让人与世界的连接更轻松便捷。我们不妨顺着这个趋势大胆的畅想一番，在未来的某天，世界的数据会植入我们脑中，不再有陌生的地方，现有的地图形态也许会消失，因为它就在我们脚下。
文章来源：站酷 作者：CDX创意设计中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
