最近做的都是小程序的项目，小程序设计进一步的研究的时候，发现现在关于小程序的文章很少，也不全面。目前大部分的问题通过微信开放社区，所以来结合官方指南和文章资料，结合工作设计中遇到的问题，总结一份比较全面的小程序设计指南，希望可以帮助到大家。
小程序是一种即用即走，无需下载的手机应用，和APP不同，用户不用担心会占用手机内存的问题。用户可以直接通过扫一扫或附近搜索即可使用。小程序刨除一切繁杂的程序，将用户的操作变得更加灵活快捷，大大提高了用户体验，使用量也大大增加。
2016年1月11日，2016微信公开课PRO版在广州举行，“微信之父”张小龙首次公开演讲，宣布微信公众号将推出“应用号”，通过公众号完成一些App的部分功能。
2016年11月3日晚间，微信团队宣布：微信小程序正式开放公测。
2017年9月20日，支付宝小程序向用户开放公测。
2018年7月，百度AI开发者大会上，百度宣布百度智能小程序正式上线。
2019年6月1日，QQ小程序在安卓的新版QQ上如期上线，5天后，正式登陆 iOS 版手机QQ。至此，QQ小程序完成全面上线。
从最早的微信到现在，支付宝小程序、百度小程序、抖音小程序，几大巨头都布局了小程序。
主流小程序平台网络关注度差异较大，微信小程序的网络关注度最高，其次是百度小程序和支付宝小程序。对比用户认知来看，微信小程序以分享链接出现，百度小程序是抢红包平台，支付宝小程序是抢特价和抽奖平台等;小程序平台网络关注度差异折射用户对小程序平台生态的认知。
微信作为国民社交软件，日活用户已达3亿，这无疑是巨大的用户流量聚集地，对商家的吸引程度可想而知。我们接下来也是按照微信小程序为例来逐步讲解。
微信官方文档：https://developers.weixin.qq.com/miniprogram/design/
特点：依附微信强社交模式，引流能力强，流失率低，推广迅速
量级：月活10亿
百度作为中国最大的搜索引擎工具，有天然的数据支撑。百度每日的搜索量可达到几十个亿，又是一个巨大的流量地。此外，基于产品的搜索特性，百度小程序能精准覆盖目标用户。通过小程序为用户提供信息与服务，通过提升整体的服务效率实现用户留存。
百度-智能小程序设计规范：https://smartprogram.baidu.com/docs/design/overview/introduction/
特点：基于百度搜索引擎的优势，增加产品词的优化曝光。
量级：月活5亿
抖音小程序开发基于字节跳动客户，面向字节跳动所有产品线用户（包括抖音、今日头条等），不同小程序/小游戏满足不同种类用户需求。支持小游戏和小程序产品形态，支持个人与企业开发者，只要有优质内容或优质服务。产品形态与接口形式适配行业标准，减少开发者开发成本。
字节小程序：https://microapp.bytedance.com/docs/zh-CN/mini-app/design/design-guidelines/Design-guidelines
特点：旨在利用优质内容所关联和产生的使用场景进行小程序导流，解决开发者流量与转化困扰。
量级：月活9亿
支付宝小程序依托支付宝的商业和生活服务基因，小程序细分行业分布也以生活服务、金融保险和电商等小程序为主。同时支付宝成熟的信用体系也为商家提供了类似于免押租赁等玩法，借助芝麻信用、蚂蚁花呗等功能为流量变现创造更多的想象空间。
支付宝小程序设计规范：https://docs.alipay.com/mini/design
特点：在组件上采用了此前成熟的Ant Design 设计，在开放API上则面向自身特色能力来封装，在框架方面采用开源的React/webpack等技术为基础，结合了支付宝自身的多年技术沉淀来实现。
量级：月活7亿
裂变型小程序是为我们其他小程序，在短期内提供大量流量的。比如跳一跳娱乐游戏类的小程序，还有电商裂变的成功典范可以属拼多多。
针对于裂变型的小程序来说，裂变点就是痛点，除了产品的主功能，小程序的裂变设计为什么要用户裂变？比如拼多多，用户为了零元购商品才分享的，并且帮忙砍的人也想零元得商品。
缺点：在裂变后几乎是无法使用，产品的扩展性差
优点：用户流量来取快、用户路径可以达到最短
设计点: 考虑最优的用户裂变路径
小程序一直是用完即走的使用体验。留存型小程序是我们用来沉淀客户的。需要我们结合自身的产品，发掘能沉淀目标客户的场景，一般需要结合原有APP来开发，开发一款对用户有价值、简单易上手的小程序。
可以从这几个方面来考虑：
强运营：一个小程序能给用户提供的能量毕竟是有限的，现在竞品太多，如果不能持续给用户刺激，沉寂是早晚的事，所以电商产品会通过优惠券、分享立减、拼团来刺激用户消费。
搭建激励体系：针对用户的损失厌恶，建立用户的激励体系 - 如利用积分商城，引导用户通过签到、消费、分享各种行为奖励用户，增加用户的离开成本。
社区：基于微信的社交基础上，把微信群建立到小程序里，可以长期培养用户的使用习惯，而且可以利用社交的互动性，低成本的完成裂变转化。
产品型的小程序一般是有了APP的商家建立小程序，是为了彼此相互融合，相互促进。因为小程序开发成本更低，更多曝光的机会。产品型的小程序设计一般是照搬全部，或者精简设计，一般要结合商家业务来判断。
如果对于一些垂直品类的产品，像马蜂窝和携程旅游将酒店预订、景点门票预订、周边游、租车包车游等各项服务都做了一个功能拆分，生成的了各项小程序的入口，更好的将服务垂直，缩短产品和业务触达用户的渠道，自然转化率更高。
对于想为了借助微信这一大流量平台发展的APP可以照搬APP那一套
在小程序中工具型是最符合“用完即走”这个理念的，就像家里的工具一样想要的时候拿出来。比如识图、查公交线路、寄快递、抽奖等小程序，只要打开对应的小程序就可以了，不用的时候也不占用内存。还有一种本地服务小程序，借助“附近的小程序”功能，为周边提供便利服务，如上门维修、家电回购、本地商圈等等小程序。
工具型的小程序关注点在于功能本身，解决人们的某一个需求，让他们更便捷。在设计的时候要注意视觉和结构和信息布局的简洁，然后考虑易懂先考虑功能理解度和识别性，将功能产品化快速提高用户的效率。然后引导用户快捷完成任务。
APP开发根据开发方式可分为原生APP和Web APP，APP主流开发操作系统有安卓和IOS。
安卓版本原生APP的开发语言为JAVA，IOS版原生APP的开发语言为Objective-C。
安卓版本Web APP的开发语言为JAVA+HTML，IOS 版Web APP的开发语言为Objective-C+HTML。
小程序是基于腾讯、今日头条、百度等平台的小程序开发框架进行开发，开发技术类似HTML。
载体不同则用户群体不同，小程序是基于微信平台的应用，用户群仅限微信用户，截至目前也就是微信10亿+的用户量；而APP则是上架在App Store及Android应用市场，面向全球拥有智能手机的用户，也就是33亿+的用户量。
APP
一直存在手机中会占用空间，太多的APP可能会导致内存不足，总是清理缓存。
小程序
因为不需要安装，占用内存空间忽略不计。
APP
APP在实际开发中，它需要开发安卓系统和iOS系统两种版本，所用到开发语言不同，同时还需要根据手机的不同尺寸进行适配，开发成本较高。
一款完善的双平台APP平均的开发周期约3个月。
开发成本低，一次开发就可以适配所有手机。平均开发周期约2周。
原生App的内存就不受控制，那么内容框架可以根据产品定位随意增添，可发挥的空间非常大，一些电商、社区等等无论多么复杂的应用都能一一实现。
因为内存受限的控制，导致内容框架不同，在小程序上功能架构设计的比较简单，符合轻量化、“用完即走”。
功能比较受限，因为接口功能有限。
现在小程序现有接口
如上：豆瓣原生app包含了首页-书影音-小组讨论-市集-我的等多个内容板块，但是小程序只保留了豆瓣最核心的部分-电影评分的栏目，将其商城和社区的模块全部砍掉了，只是将小程序作为一个资讯型的浏览窗口。
其实移动端产品的设计规范和原则大致是相同的，但是因为受制于微信小程序的框架，小程序产品与App产品在部分版块的表现形式上会存在一些差异：如顶部导航栏区域等。
其实移动端产品的设计规范和原则大致是相同的，但是因为受制于微信小程序的框架，小程序产品与App产品在部分版块的表现形式上会存在一些差异，主要体现在以下几个方面
小程序的导航栏官方指定了两种样式，一深一浅，背景色可自定义，遵循“导航明确、来去自如”的原则。
底部标签栏是移动端产品的主要导航方式，主要表示用户当前所在的位置，所以会有选中与未选中两种切换方式
App：可支持最少2个，最多5个的tab切换，图标大小以及底部标签栏高度可自定义。
小程序：也可支持最少2个，最多5个的tab切换，使用原生控件时，要遵从 icon 尺寸81*81px。
App：流畅、体验佳，例如发朋友圈时拖动照片排序。
小程序：除非必要，否则不建议使用拖动排序。图片和列表拖动在 Android机型上体验不够，会有卡顿的情况。
APP：会隔三差五给用户推送广告，太多未读提示会逼死强迫症
小程序：不允许主动给用户发送广告，仅能回复模版消息
APP:直接打开
小程序：从微信首页，下拉，点击打开。
APP:界面切换的流畅度以及加载数据的响应速度都会比小程序更好一些
小程序：当在比较深的页面上，或者不是原生的页面加载时间会比较长，会卡顿。
APP:动画不受限，活动运营比较好营造氛围感，带给用户非常友好的沉浸感和归属感。
小程序：受内存的影响，而且小程序都是轻量化的功能，动画的展示元素会非常的少，因而在界面会觉得很平淡，像是工具型产品。
APP:在原生APP里可以开发客服，或者直接转化。APP到小程序里可以直接跳转。
小程序：小程序的虚拟支付会影响iOS用户的转化，并影响整个业务的转化。客服也是需要关闭小程序单独对话。与APP的响应需要一个繁琐的步骤。
APP:推广新用户需要下载APP，需要占用手机内存，推广率低。但是APP的开发自由度高，推广方式不受限制，渠道多，转化率高
小程序：依靠微信平台，可以通过扫描二维码、搜索、发送好友和朋友圈，推广率高。虽然推广率高，但是因为官方的各种限制，增加营销难度，转化率低。
微信小程序的官方设计规范，在微信的官方文档里都有全面的讲解微信小程序的设计指南，我就不多赘述了。按照官方的来对于设计一个基本的小程序是完全够用的。
友好礼貌、清晰明确、便捷优雅、统一稳定
大家可以自自行查阅微信官方平台 ：
https://developers.weixin.qq.com/miniprogram/design/#%E5%8F%8B%E5%A5%BD%E7%A4%BC%E8%B2%8C
我知道大家可能看官方指南觉得枯燥，特意找来一篇很不错的小程序的文章，建议结合服用，效果更好。
设计师必看的小程序设计指南：https://www.zcool.com.cn/article/ZMTA4NjYxMg==.html
在最基础的设计，我想跟大家聊一下，在微信的设计规范内如何进行进阶设计，这也是我实际工作中探索的结果，希望能给大家更多的启发。
官方指南：开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致，指向清晰，有路可退。受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
在根据官方的指导下我们如何进行设计呢
需要注意的是：自定义导航栏之后要加微信默认的下拉刷新会出现一个问题：下拉刷新组件会出现在导航栏上面！所以如果你需要做自定义导航栏，就需要自定义下拉刷新。下面提供luyimei微信小程序下拉刷新组件。
官方指南：开发者可为小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。
按照产品需求也可以直接去掉底部导航栏。
顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。
微信官方小程序里启动页加载样式是由微信官方提供，只需要提供logo就可以。
页面下拉刷新加载虽然微信官方文档说，开发者无需自行开发，但是想要更改loading也是可以的。现在小程序开发的比较完善，尽量用小程序标准走，自定义开发有可能会破坏小程序的用户体验。
页面内加载反馈、模态加载和其余的加载样式都可以根据需求设计，新手可以参考着官方指南来。
若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
不要在同一个页面同时使用超过1个加载动画。
在页面设计的时候尽量考虑到手机键盘输入困难或者容易引起误操作，小程序的设计可以利用一些接口来优化用户体验。
遇到必须输入的场景可以尽量让用户选择。让比如搜索时的历史记录和模糊搜索，而减少或避免不必要的键盘输入，可以大大减少用户的输入成本。
复杂表单的输入会给用户带来心理负担，在遇到大量输入的场景下，可以把输入换成选择，尽可能的减少操作，例如扫描银行卡可以只需点击按钮，采用摄像头识别接口来识别信息。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。
关于小程序的适配设计师不用过多的关心，但是可以了解一下。小程序里的尺寸单位叫 rpx，可以根据屏幕宽度进行自适应。在750*1334的设计稿里，1px = 1rpx。在小程序里宽度都是750rpx,高度就通过那个宽高比获得，只要涉及具体数值的高度的都通过这个比例计算就行。
官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D
小程序的普通数据可以通过“小程序数据助手”查看，有特殊观察的数据可以单独埋点。当前功能模块包括数据概况、访问基础分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计和用户画像（年龄性别、省份城市、终端机型），数据与小程序后台常规分析一致。
疫情期间产品设计师的价值，可以查看周边疫情情况，和确诊人员到自己的距离。
网易严选的品牌理念是“好的生活，没那么贵”。清晰的品牌设计，设计语言透着追求品质生活的态度。
多抓鱼二手书是一款人性化的二手书交易市场小程序。
京东良研小程序是专业调研及数据分析的率工具，整体的简洁、轻量化的设计很符合调研场景的商务感。
豆瓣评分提供的电影介绍及评论。豆瓣是典型的有情怀，小而美的产品了。
因为在小程序里导航栏的层级是最高的，即使隐藏导航栏Title Bar也是依然存在的。
除了官方指南里的模态对话框，也可以尝试半屏弹窗，一是承载更多信息，二是更好的继续流程不被打断。
在运营活动中，活动弹窗起着活动引导，突出重点的作用。这类弹窗往往要设计的“热闹”一些，可以更好的引导用户留存裂变。
微信小程序官方曾发布过整改通知，小程序对于iOS系统上提供的虚拟物品不能展现不能出现支付、购买、获取VIP、开通会员、价格、iOS限制、苹果系统限制等购买相关字眼；也不能出现引导字眼，比如扫描二维码获取。即使实际上它们都不可使用；也不得引导至为外部网页或App来实现支付功能。
也就是说在苹果设备（IOS）系统中，小程序中不能进行虚拟物品的支付，比如积分、购买课程、打赏等等，对于在线教育而言，由于课为售卖的主体，与课程售卖相关的购买、营销推广（秒杀、砍价等）等都产生了一系列因虚拟支付衍生的问题。
目前没有特别完美的解决方案，要不牺牲用户体验曲线救国，要不冒着小程序被封的风险顶风作案。
直接关闭小程序iOS支付，这种是最合规但是也是最无奈的方式，“亲宝故事”就是采用这种方式，用ios打开界面入口都跟安卓不一样。然而实际上他只是把入口给隐藏了，通过安卓手机分享依然可以打开被隐藏的收费信息，当然这个方案对于没有APP的产品损失还是很大的。
线上课程的话，可以让用户提前在公众号或者社群里跟iOS用户解释为什么不能购课，或者是还有哪些途径可以获课。其他途径提前支付，在后端生成验证码，直接输入解锁课程。
而在ios上，把原本虚拟物品转化成实物品，比如卖光盘，而本质上的价值是音频本身。如果按节卖可能实物成本及配送费过高，那么在ios上可以按系列专辑打包卖，使用ios设备的用户只能卖专辑，买完后可以解锁该专辑下的所有音频。当然，这种方式不知道在运营商是否存在问题。
从官方给出的规则细则解读来看，这种引导也算是不合规的，将支付引导去公众号、到APP上进行。联系客服完成支付或购买流程。这个是非常不建议的，一旦被发现会有举报被封的危险。
小程序的页面之前的逻辑跳转，最多可以支持10个层级。在小程序的开发过程中会反复确认页面之间的跳转逻辑有有没有遗漏，但是会忽略掉用户循环操作，可能会造成打开页面层级过多而导致无法继续操作。
即使用户打开10个页面以内5个以上页面，也会需要连续按多次“返回”按钮才可以退出小程序，导致用户的体验也相当地不好。
除正常页面跳转的逻辑没有问题之外，在小程序的交互中还需要考虑两件事，一个是整个用户点击的最长路径是不是过长，二是考虑页面流失率的情况下，对路径中终端的页面导航栏设计到首页的跳转，即可解决这个问题。
小程序最大的优势就是可以分享社交好友，比如看到产品拼单才可以购买的话，用户会积极的邀请自己的好友一起购买，达到快速的裂变，给企业带来巨大的流量。而且按照这个样分享路径推广的成本是极低的。分享的方式可以是分享朋友圈、二维码分享、微信分享好友。
它是用来显示h5页面的组件。只需传一个h5页面的地址，就可以显示该页面。
小程序中可以使用 webview 组件，直接把 mobile web 套到小程序里，比如「多抓鱼」就是以 webview 为主的。
节省工作量，已有的 mobile web 不用重复开发。
不需要等审核，随时部署更新。
直接兼容一些小程序不支持的原生标签，比如 <pre/>。
一个页面里只能有一个 <webview/> 组件，不能有其它。比如想用原生的 <button/> 来调起支付、分享，就不可以。
只有绑定为业务域名的 url 才能跳转，不可以随便打开什么网页，上限 20 个。
目前扫一扫页面时不支持二次设计的，必须调用微信小程序的官方接口。
具体文档可参考：https://developers.weixin.qq.com/miniprogram/dev/framework/product/
现在信息爆炸的时代，很多信息和弹窗会给用户造成打扰，忽略了消息的本质是为了服务，因此微信对订阅消息加了很多限制和优化。最主要的便是把选择权留给用户。
在订阅消息授权需要用户主动点button 触发，如果没有勾选「总是保持以上选择，不再询问」，选择允许，也只可以收到一条订阅消息，则每次都会发起弹窗询问；如果用户勾选「总是保持以上选择，不再询问」，只是不唤起弹窗，但也不是可以无限次打扰用户发送消息。
长期订阅消息目前只对特定行业开放，如政府民生、金融、医疗等，一般我们也接触不到，所以不做赘述。
在微信小程序里想获取用户的信息，不可以登录小程序后自动弹出登录弹窗。需要用户主动触发登录按钮进行登录流程，并且必须为用户提供「暂不登录」的选项。
具体文档可参考：
https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401?scene=0&clicktime=1563895955&from=groupmessage&isappinstalled=0
从小程序链接了10多亿用户，在生活中不停的挖线下场景，解决工作、娱乐、购物多种生活需求。小程序已经融入了我们线下生活，随着用户习惯的养成，使用频次和平均时长逐渐增加。小程序的快速获客速度，和极低的开发成本，成为各个公司的新宠，希望开发新的小程序入口可以快速且单一的让用户有一个更纯粹的产品功能体验，同时也可以对现有的APP起到引流的目的。
针对小程序的留存一直是开发者非常在乎的问题，因为不像APP开发者的话语权很大，因为小程序的平台性质，对小程序开发进行了很多的限制，让推广和营销还有转化都增加的了难度。没办法让一个产品孤注一掷的做小程序，目前只能是和APP搭配着来开发，作为一个产品功能单一路径的功能产品。
在设计小程序时不能依靠传统APP的思维去设计，按照轻量、社交、价值、引流、用户数据和打造小程序生态环境。
在设计思路上把握设计轻量化和用完即走的原则。同时深挖小程序的用户场景，梳理APP中的核心主流功能，弱化次要功能。依照原有APP去设计更符合小程序使用体验。利用好微信的社交特点，融入微信生态为后期的服务升级、转化或者对接其他矩阵小程序留好余地。
因为疫情爆发，生鲜电商在寒冬中迎来了机会，给大家养成了消费习惯。社区电商更是一个2-3亿的一个巨大市场，本就是以用户为中心，基于体验和分享去中心化的体验模式，在疫情的情况下培养用户成本大幅度减少，借助小程序加快向下沉市场渗透的速度。
现在资本也很看好小程序，以后的小程序还会发展的越来越快，设计师越早掌握小程序的设计语言方法越好。市面上关于小程序的文章不是很多，大家可以着重去这两个网站了解相关问。
微信开放社区：https://developers.weixin.qq.com/community/develop/mixflow
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/wechatpay.html
把这半年来接触到的问题跟大家在这里分享，还有很多角落问题还有待深入了解，随着微信小程序官方文档和通知的不断更新，深入挖掘更深入的场景和进行更多全面的探索后，后期还会继续会跟大家分享。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
根据当前品牌升级的需要
对产品APP的视觉做的一次重新设计
经常使用或者关注资讯类产品的同学可能会留意到，在信息流中，有的标题在左图片在右，而有的是图片在左标题在右，这两种形式看似区别不大，但又似乎存在很大差异。设计师在设计时是如何考虑的？我认为这是一个很有意思的话题，所以今天就和大家聊一聊在资讯流中，左文右图和左图右文的差异。
左文右图的样式普遍出现在新闻资讯产品中，其中包括今日头条、腾讯新闻、UC浏览器信息流以及我们的vivo浏览器信息流等等，现在就让我们从资讯平台作为切入点，对左文右图的形式进行分析
1. 左文右图符合人们长久以来的阅读习惯
按照已知经过验证的理论，即F阅读顺序（尼尔森的用户阅读视线模型），用户浏览页面的顺序是从左往右自上而下，因此左上角的信息最早触达用户。然而至文字诞生以来，多数情况下，人类普遍通过文字来获取信息，我们不否定，通常情况下图片的易识别性远优于文字，但是从信息传递的准确性以及丰富性上来说，文字的优势是远大于图片的。
所以在资讯类产品中我们更倾向于优先通过文字来识别内容，而将图片作为辅助信息，因此根据我们从左往右自上而下阅读习惯，将文字放在左边更有利于用户获取信息。我们通过一个案例来分别了解一下左图右文与左文右图的用户阅读路径是什么样的。
在上面的案例中，左图右文用户的阅读路径偏长，并且常常出现视线的折返
左文右图用户的阅读路径较短，不会有视线的折反。因此，基于效率和阅读习惯的角度来说，左文右图优势更明显。
但或许这里就会有人提出疑问 “在资讯类信息流中很大一部分用户都是因为受图片的吸引才会对该则新闻感兴趣的呀” 。的确，这是一个普遍场景，但是在前面我们也提到，图片的易识别性是远高于文字的，因此哪怕是将图片放在文字后面，对于图片的“魅力”的影响是在可接受范围内的。
2. 左文右图更有利于为用户提供统一的阅读基准位置
在资讯信息流中，为了信息展示的多样性，避免单一的信息流结构使用户感到单调，在样式上除了左文右图的样式，往往还会搭配三图、大图及视频的样式出现，而在这样多种穿插样式的情况下，左文右图能够为用户的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程中，极大地减小了阅读压力
3. 尽可能保持整体信息流图文阅读先后顺序的一致性
资讯流中除了左文右图的样式，还会搭配三图、大图及视频的样式出现，因此我们不仅仅要考虑单个信息流样式的阅读体验，更要保持整体信息流阅读先后顺序的一致性，这能够为用户提供较好的沉浸式体验。
4. 在视觉上更符合格式塔闭合原理
左图右文的的形式在标题文字较短的情况下，右上角就会出现视觉上的缺角，这会破坏页面整体的工整性，而左文右图的形式就很好的避免了这个问题。格式塔原理对闭合的研究中提到，人的大脑无论看见什么东西，都喜欢去将它们想象成为一个整体，如果元素太过杂乱大脑无法将其归类成为一个整体，那么视觉感受就是非常不佳的。
小结：左图右文基于它在信息获取效率和人们阅读习惯上的优势得到各大新闻资讯类产品的青睐，是较为通用的形式。那是不是就没有“左图右文”什么事了？其实不然，左图右文仍是有其优势的，并且在特定场景下，左图右文的形式的优势会更明显。
1. 图片在左侧，第一时间吸引用户视线
在内容形式的吸引力上，视频>图片>文字，并且前面我们提到，图片的易识别性是高于文字的，因此一张高质量的图片往往能够在第一时间触达用户并形成转化。但前提要求是我们能够把控图片的质量，否则效果将适得其反，所以我们说左图右文的样式一般更适合用来承载PGC的内容。例如主打品质时政新闻的资讯产品澎湃新闻以及垂类游戏资讯社区平台篝火营地，其推荐的内容都来自专业团队的输出，对内容图片的质量有较好的掌控力，因此采用了左图右文的形式优先给用户展示图片信息，以提升用户对内容的兴趣。
2. 在带有明确目的阅读场景下，例如查找历史内容、搜索等，左图右文的形式效率更高
在用户带有明确目的场景进行信息阅读时，用户往往对内容已经有了一个大致的预期，所以这个时候如果我们能让用户第一时间识别图片，能够大大的提升用户的操作效率。例如用户在查找一篇曾经看过的文章时，当曾经阅读过那篇文章的封面出现在屏幕中时，用户便能立刻作出判断，这会比在众多文字标题中查找更为便捷。
左文右图
左图右文
#Tips
无论是左文右图还是左图右文都各有其优势及适用的场景，但当我们在设计信息流时，我们要注意为用户提供图文阅读顺序一致的体验。
以上是个人对资讯流左文右图&左图右文的一些思考和心得，感谢大家的阅读，假设通过本次阅读能够给大家今后的工作带来一些启发和思考，那就实在是再好不过的事了:)
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
距离iPhone 12系列发售已经有段时间。
之所以没第一时间撰文，是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。
而在此之前，即便是Apple线下店也没有样机。
保险起见，我等接触到 Mini 和 Max 真机后，开始着手撰文。
一周前完成了文字部分，本周终于完成了几十张配图，这才和大家见面。
为了方便新同学更好的了解本文内容，我会简单提及一些关于适配的必要信息。
并附上往期内容的链接，方便延展翻阅。
本文约3200字，分以下六个部分：
在网络上搜索手机界面适配的相关内容。常会看到文中提及以下几个参数：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI数值…
其实，在处理常见手机界面适配时，设计师只要关注以下3个基本参数：渲染像素（Pixel）、逻辑像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解为是手机截屏时所得到的图片尺寸，单位是px；
逻辑像素（Point）可以理解为是程序员在用代码绘制页面时所用的尺寸，也被叫做“1倍图尺寸”。比如Sketch中对应的机型尺寸
对应的就是手机的逻辑像素尺寸。
倍率（Scale）因为逻辑像素和渲染像素存在着一定的比例关系，这种比例通常被称为倍率，比如切图后缀的@2x、@3x对应的就是倍率的数值。
值得一提的是，倍率不一定是整数，比如三星GALAXY J2（540×960），倍率是@1.5x；
华为M3 Life 8.0”（1920×1200）的倍率则是@2.25x
适配方式主要有两种：
1. 倍率适配
主要应用在逻辑像素相同，但倍率不同的设备。
比如iPhone 11适配到 iPhone 11 Pro Max
两个适配的逻辑像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 逻辑像素适配
这种适配方式应用在两个倍率相同，但逻辑像素不同的设备，
比如iPhone 11 到iPhone 8：
两个设备的倍率都是@2x，逻辑像素则分别是：414 x 896pt 和 375 x 667pt。
如果两个设备的倍率和逻辑像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常会先进行逻辑像素适配，再进行倍率适配。
由于倍率适配相对简单，只需要考虑分割线和切图这两个因素。
因此，设计师通常说的手机适配、尺寸适配常指逻辑像素适配。
所以搞清楚iPhone有哪几种逻辑像素，就成了iPhone适配和验收的关键。
在今年10月份发布的iPhone 12系列共有四部机型。
在谈新设备前，我们先简单回顾截止iPhone 11系列时，iPhone的几款主流机型及其对应的参数：
通过图表可知，在iPhone 12发布前，市面上的iPhone共有6种不同的分辨率需要完成适配。
那么iPhone 12又带来哪些变化呢？
从官方给出的屏幕数据可知，四款设备的物理像素如下：
由图可知，今年iPhone共新增了3种全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在设计层面，iPhone 12系列四款手机，只为设计师增加了1170×2532、1284×2778 两种新的设计尺寸。
画重点：目前有一些文章，错把iPhone 12 mini的屏幕参数1080×2340当做最终的绘图尺寸，认为12 mini的逻辑像素为360x780pt 。
事实上iPhone 12 mini采用了iPhone X一样的渲染像素，即1125 x 2436px，对应的逻辑像素是375x812pt。
为了解释这个问题，得从大家比较熟悉的iPhone Plus系列手机说起。
在前文提到，手机界面适配时，设计师只要关注：渲染像素（Pixel）、逻辑像素（Point） 以及倍率（Scale）这三个基本参数。
而其中的渲染像素通常会和屏幕的物理像素保持一致，比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
这也导致大家很容易把物理像素和渲染像素混为一谈。
但既然说了是“通常会保持一致”，就总会有例外。
比如iPhone Plus系列，官方给出的屏幕参数（物理像素）是1080×1920，但渲染像素却是1242×2208。
所以设计师在针对Plus系列做图的时候，就得按照1242×2208进行输出。
而新款iPhone 12 mini的情况和Plus系列一样：
官方给出的物理像素尺寸是1080×2340 ，但拿到设备真机后，通过测量可知12 mini采用的渲染像素是1125×2436，这和iPhone X的渲染像素保持一致。
在明确这一点后，我们再看下iPhone 12系列设备的参数：
如果我们只看逻辑像素，加上iPhone 12系列，目前iPhone 共有7种尺寸。
这些尺寸都需要设计师留心，并完成相关机型的验收走查。
不过，到这里还没完。考虑到iPhone存在“标准”和“放大”两种模式的视图。
还需要将放大模式的尺寸考虑在内。
目前各个设备的放大模式对应的适配三要素分别如下：
其中320x693pt是全新的尺寸，出现在12 mini、12、12 Pro这三款设备中。
由此，在把放大模式纳入适配考量范围后，iPhone的逻辑像素共统计出8种尺寸。
如果将其中最小尺寸和最大尺寸比较宽高的话，宽度相差了108pt、高度相差了358pt
对于那些横滑需要外露一部分的页面，需要重新设计尺寸或调整局部的适配方案。
这对于一些单屏显示的页面而言，也是件麻烦事。
先思考一个问题，在下面几个尺寸的iPhone中，你觉得哪一种尺寸的iPhone在市面上占比最高？
在 iPhone 12发布之前，在iPhone这几种屏幕尺寸中，你觉得哪一种iPhone的市场占有率最大？
我相信绝大多数设计师，都会下意识觉得750×1334这个尺寸的机型占比最多。毕竟在过去很多年里，大家都是用这个尺寸在做图。
那实际情况究竟如何呢？
我们先看下阿里友盟今年05月01日的数据：
PS：数据公司按设备的物理分辨率进行统计，而非渲染像素。所以这里的1920×1080对应的是Plus系列手机。
今年五月，国内iPhone占比最高的机型是Plus系列。而设计师钟爱的750×1334 和 1125×2436分别排在第二和第三。
其中排在第三的1125×2436（对应@2x的设计尺寸是750×1624）和前两者的占比仍有较大的差距。
那是不是随着时间的推移，1125×2436的机型占比会逐渐增大，并逐渐占据第一呢？
如果你也有同样的想法，恐怕又得失望了。
翻看5月份的iPhone增量数据，会发现一个有意思的情况：
在增量中，828×1792（对应iPhone 11）增速以51.9%遥遥领先第二名的1125×2436。
下面，看下的11月统计的iPhone存量数据：
828×1792已经从占比第四名上升到了第三名，
再看11月份的增量数据：
828×1792的增速不减反增，从5月份的51.9%增加到了最近的63.8%
如果不考虑的iPhone 12系列，828×1792有望接替Plus系列，成为市场占比最大的iPhone尺寸。
在828×1792的设备飞速增长的同时，1125×2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%
过去设计师常用的设计师尺寸是750×1334，但随着iPhone进入全面屏时代，如果再把750×1334作为设计的基准尺寸显然已经不合时宜。
而目前常用的750×1624尺寸对应的机型（对应1125×2436在@2x下的尺寸）无论在存量市场中的占比，还是增量市场中的占比都少的可怜。
而新发售的iPhone 12系列中，也只有12 mini采用了1125×2436作为渲染像素的尺寸。而其余三款，采用全新的渲染像素和逻辑像素。
很难想象1125×2436这个尺寸的设备，还能和过去的750×1334尺寸一样，成为iPhone主流的分辨率尺寸……
设计基准尺寸的选择，除了要看设备的占有率，还要兼顾适配的成本。比如，当有大中小三种尺寸的设备需要设计时，优选中间尺寸作为基准尺寸。
以中间尺寸为基准，无论是适配到小尺寸、还是适配到大尺寸，界面的调整幅度都是最小的，偏差不会太大。
反之，如果选择小或大作为基准，或许页面适配到中间尺寸时感觉还行，但适配到另一侧相对极端的尺寸时，则容易出问题。
界面设计师所用的绘图基准尺寸并非一成不变。回看过去：
设计师用的基准尺寸已经从最初的640×960、变成640×1136、再到750×1334，以及现在的750×1624，已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。如今随着iPhone 12的发布，加上750×1624对应机型在市场中占比的低迷，我们可以重新思考在iPhone众多尺寸中，哪一款更适合作为设计的基准尺寸。
这里先不考虑设计师对尺寸的惯性依赖，只思考适配兼容性和市场占有率这两方面。适配兼容性，按照“大中小”优选中间尺寸这一原则。我们可以很容易的在目前8种iPhone的尺寸（指逻辑像素）中选出位于中间的尺寸：
分别是 375x812pt 以及390x844pt，前者对应1125x2436px ，后者则对应1170x2532px，如果进一步将其转换成大家熟悉的@2x尺寸，则分别对应：750×1624和780×1688
在市场占有率层面，随着Apple逐渐停售之前的设备，新款iPhone的分辨率占领市场只是时间问题。而在新设备中，只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px（375x812pt，对应@2x下尺寸750x1624px）。如果按照此前的经验推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成为最热卖且占比最高的设备只是时间问题。
截止iPhone 12发布为止，显然 390x844pt （对应@2x下尺寸780x1688px）更适合作为今后的设计基准尺寸。
转自：优设网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近收到小伙伴的一个问题，以下两种卡片切换怎么用。
以下是我收到的两个不同案例，第一眼给我们的感受就是这两个case不都是可以通过手指左右滑动嘛？
好像有区别，但是具体有什么区别，分别可以怎么用，一下子又说不上来，那么大家可以来听听我的理解！
不知道大家家里是否有两种门，一种是转动把手可以向内或者向外打开的，另一种是拽动把手进行左右移动的，就像下面这个样子。
我们可以通过把手和门的样式判断出如何对其进行操作，所以两种卡片，首先在形态上就有区别，一种是平铺一种是叠加，也就是一个是二维一个是三维。所以有小伙伴问要问，那又怎样，实质上都是卡片切换，为什么在banner上不可以用叠加态呢？
除了在形态上的区别外，还有交互手势的区别，大家以为叠加和平铺都是轻扫切换吗，首先这两种形态都有通过轻扫手势可以进行状态切换的过程，但实质上，叠加状态控制的是当前卡片与下层卡片，而平铺状态控制的则是一整个轮播容器，并且叠加卡片除了轻扫以外还可以拖拽。
这里再说一个交互手势的区别：轻扫（swipe）、甩动（flick）、拖拽（Drag）的区别，拖拽和前两者比较好区别，大家应该都玩过地摊游戏像套圈圈，轻扫和甩动就像你站在原地往目标一扔，而拖拽就像是你探出半个身子，把圈放到最近的一个玩具头顶上再放手，是不是很形象
那么轻扫和甩动的区别是什么呢，我们这里简单的描述两者在可见范围内的区别，比如：
1. 惯性
比如我们操作移动端信息列表的时候，大拇指对于内容界面的滚动进行的是甩动，上滑后页面不会马上停下，而会滚动一会再停下。这就相当于给了一个物理世界的摩擦力的效果，但是轻扫则几乎不明显。
2. 位移
轻扫所经过的位移较短，基本上在该容器中发生位移变化，虽然两者其实都可以不限制方向，但是位移的距离是有区别的，轻扫更短，甩动更长。
3. 力量
轻扫无论你的初速度还是力量多大，都只能完成稳定的动作与状态，例如侧滑删除，不管再怎么用力和加速都只能让对象在指定的范围内呈现。
4. 范围
这个其实很有意思，不知道大家最近是否更新了iOS，更新的同学可能在编辑闹钟页面会觉得想要原地爆炸，因为我们看下图
无论是轻扫还是甩动，我们都需要有一个明确的范围，在老版本中的时间切换，轻扫和滚动都能很快速的选择到时间，因为我们可以同时看到上下文并且做出预判，但是新版本就变得有点阿西吧的感觉，为了更精准的选择到时间我们必须从轻扫/甩动换成滑动，甚至类似于拨动的手势，难用至极。所以轻扫的范围也会比甩动的视觉范围更小。
那么轻扫和甩动怎么区别呢，大家可以理解为，轻扫是在甩动的基础上给被拖动对象增加了稳定效果，所以既然增加了稳定效果，那么惯性和位移都被固定、稳定化了，比如列表左滑删除，tab左右滑动的切换。
另外，大家可能觉得甩动和轻扫可以控制我们界面中大部分对象，可以帮助我们浏览，而且要我们可以将甩动进行稳定的轻扫控制。但并非那么简单，我举两个糖炒栗子，例如音量和进度的调节，我们是不可以用甩动或者轻扫，因为无法准确控制，只能使用拖拽。
5. 知乎的悬浮按钮
另外在知乎的话题切换中有个悬浮按钮，这个按钮不知道大家是否操作过，他既可以拖拽，也可以甩动，问题来了，如果对其甩动会出现两种情况，第一种，返回屏幕一侧吸附，第二种吸附到屏幕另一侧。
两种情况取决于你是否甩动过了某一条“边界”，也就是说你的手指在控制这个“圆形”对象时，何时进行了“关闭”（也就是何时手指离开了屏幕），所以这里咱们要说的是，如何选用手势进行对象控制，要取决于具体的场景和需求，这里的圆形控制器并不需要非常精准位置，所以对其赋予了拖拽和甩动两个手势，那当然这里轻扫也可以啦，只是没什么卵用。
6. QQ的未读气泡
还有比如qq的未读气泡，拖拽和甩动都可以删除它，但是轻扫不行。
其实这些规则我们在交互动效的工具中都可以很好的体现，比如拖拽开始-拖拽结束，对应的就是手指的接触拖动-手指的离开。
所以做个小总结，轻扫是甩动的稳定化效果，并且适合距离较短的进行操作，轻扫和甩动都是非化操作。
我们再回到这个案例本身，叠加和平铺卡片的交互手势，叠加卡片利用的是轻扫，并且还具有拖拽的手势属性，而平铺的卡片可以轻扫，相当于单张浏览，类似banner切换，并且也可以具有甩动的可能，比如淘票票的热映卡片，不过平铺的时候一般单张卡片不适用甩动，轻扫即可，因为单张卡片使用甩动，信息基本看不清楚，多张卡片使用甩动更容易提高检索的效率。
另外用过探探的老司机们都知道，喜欢哪个美女帅哥就往右边“扔”卡片，为什么是扔呢，因为这个“扔”包含了选择的意思，就像性感的荷官在发牌一样，这张卡牌就是你的了！当然，既然发给你了，你也不能退，再想找回来就难咯
所以其实在手势上，叠加态的卡片切换在我们的预期和常规使用中，有着选择、不可逆的属性，那这就和平铺的二维卡片切换就完全不同了。
叠加态的卡片更不方便信息对比，而平铺卡片则可以，例如腾讯视频的vip等级卡片切换。没有对比就没有伤害，不造成伤害，就促进不了买卖。所以你看非诚勿扰都是排一排给你选的而不是一个出来不行换另一个，因为你不知道下一个会不会更不喜欢。
叠加态的卡片就像是德州扑克一样，不知道大家是否all in过，是否赌赢过最后一张牌，在没有发出那张牌的时候，我们总是抱着期望，所以叠加的卡片，在我们普通人的预期中是潜意识的提高的，而平铺的卡片就像已经发在你手里的卡片，你可以观察、对比，但是没有了未知感和神秘感，所以抖音是如何让你上瘾的，让你沉浸在其中的，大家现在可以理解了吗。
叠加态的卡片在展示上会给你一些样式，告诉你这里有好多张，并且是永远切换不完的，而平铺卡片则通常需要告知用户外这里有几张，你看到了第几张，所以又多了一个轮播指示器来帮你记忆。
综上所述，方案没有好坏，只有适不适合当前的场景。所以，在什么场景下用什么样的切换大家学废了吗？
转自：优设网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
距离iPhone 12系列发售已经有段时间。
之所以没第一时间撰文，是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。
而在此之前，即便是Apple线下店也没有样机。
保险起见，我等接触到 Mini 和 Max 真机后，开始着手撰文。
一周前完成了文字部分，本周终于完成了几十张配图，这才和大家见面。
为了方便新同学更好的了解本文内容，我会简单提及一些关于适配的必要信息。
并附上往期内容的链接，方便延展翻阅。
本文约3200字，分以下六个部分：
在网络上搜索手机界面适配的相关内容。常会看到文中提及以下几个参数：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI数值…
其实，在处理常见手机界面适配时，设计师只要关注以下3个基本参数：渲染像素（Pixel）、逻辑像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解为是手机截屏时所得到的图片尺寸，单位是px；
逻辑像素（Point）可以理解为是程序员在用代码绘制页面时所用的尺寸，也被叫做“1倍图尺寸”。比如Sketch中对应的机型尺寸
对应的就是手机的逻辑像素尺寸。
倍率（Scale）因为逻辑像素和渲染像素存在着一定的比例关系，这种比例通常被称为倍率，比如切图后缀的@2x、@3x对应的就是倍率的数值。
值得一提的是，倍率不一定是整数，比如三星GALAXY J2（540×960），倍率是@1.5x；
华为M3 Life 8.0”（1920×1200）的倍率则是@2.25x
适配方式主要有两种：
1. 倍率适配
主要应用在逻辑像素相同，但倍率不同的设备。
比如iPhone 11适配到 iPhone 11 Pro Max
两个适配的逻辑像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 逻辑像素适配
这种适配方式应用在两个倍率相同，但逻辑像素不同的设备，
比如iPhone 11 到iPhone 8：
两个设备的倍率都是@2x，逻辑像素则分别是：414 x 896pt 和 375 x 667pt。
如果两个设备的倍率和逻辑像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常会先进行逻辑像素适配，再进行倍率适配。
由于倍率适配相对简单，只需要考虑分割线和切图这两个因素。
因此，设计师通常说的手机适配、尺寸适配常指逻辑像素适配。
所以搞清楚iPhone有哪几种逻辑像素，就成了iPhone适配和验收的关键。
在今年10月份发布的iPhone 12系列共有四部机型。
在谈新设备前，我们先简单回顾截止iPhone 11系列时，iPhone的几款主流机型及其对应的参数：
通过图表可知，在iPhone 12发布前，市面上的iPhone共有6种不同的分辨率需要完成适配。
那么iPhone 12又带来哪些变化呢？
从官方给出的屏幕数据可知，四款设备的物理像素如下：
由图可知，今年iPhone共新增了3种全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在设计层面，iPhone 12系列四款手机，只为设计师增加了1170×2532、1284×2778 两种新的设计尺寸。
画重点：目前有一些文章，错把iPhone 12 mini的屏幕参数1080×2340当做最终的绘图尺寸，认为12 mini的逻辑像素为360x780pt 。
事实上iPhone 12 mini采用了iPhone X一样的渲染像素，即1125 x 2436px，对应的逻辑像素是375x812pt。
为了解释这个问题，得从大家比较熟悉的iPhone Plus系列手机说起。
在前文提到，手机界面适配时，设计师只要关注：渲染像素（Pixel）、逻辑像素（Point） 以及倍率（Scale）这三个基本参数。
而其中的渲染像素通常会和屏幕的物理像素保持一致，比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
这也导致大家很容易把物理像素和渲染像素混为一谈。
但既然说了是“通常会保持一致”，就总会有例外。
比如iPhone Plus系列，官方给出的屏幕参数（物理像素）是1080×1920，但渲染像素却是1242×2208。
所以设计师在针对Plus系列做图的时候，就得按照1242×2208进行输出。
而新款iPhone 12 mini的情况和Plus系列一样：
官方给出的物理像素尺寸是1080×2340 ，但拿到设备真机后，通过测量可知12 mini采用的渲染像素是1125×2436，这和iPhone X的渲染像素保持一致。
在明确这一点后，我们再看下iPhone 12系列设备的参数：
如果我们只看逻辑像素，加上iPhone 12系列，目前iPhone 共有7种尺寸。
这些尺寸都需要设计师留心，并完成相关机型的验收走查。
不过，到这里还没完。考虑到iPhone存在“标准”和“放大”两种模式的视图。
还需要将放大模式的尺寸考虑在内。
目前各个设备的放大模式对应的适配三要素分别如下：
其中320x693pt是全新的尺寸，出现在12 mini、12、12 Pro这三款设备中。
由此，在把放大模式纳入适配考量范围后，iPhone的逻辑像素共统计出8种尺寸。
如果将其中最小尺寸和最大尺寸比较宽高的话，宽度相差了108pt、高度相差了358pt
对于那些横滑需要外露一部分的页面，需要重新设计尺寸或调整局部的适配方案。
这对于一些单屏显示的页面而言，也是件麻烦事。
先思考一个问题，在下面几个尺寸的iPhone中，你觉得哪一种尺寸的iPhone在市面上占比最高？
在 iPhone 12发布之前，在iPhone这几种屏幕尺寸中，你觉得哪一种iPhone的市场占有率最大？
我相信绝大多数设计师，都会下意识觉得750×1334这个尺寸的机型占比最多。毕竟在过去很多年里，大家都是用这个尺寸在做图。
那实际情况究竟如何呢？
我们先看下阿里友盟今年05月01日的数据：
PS：数据公司按设备的物理分辨率进行统计，而非渲染像素。所以这里的1920×1080对应的是Plus系列手机。
今年五月，国内iPhone占比最高的机型是Plus系列。而设计师钟爱的750×1334 和 1125×2436分别排在第二和第三。
其中排在第三的1125×2436（对应@2x的设计尺寸是750×1624）和前两者的占比仍有较大的差距。
那是不是随着时间的推移，1125×2436的机型占比会逐渐增大，并逐渐占据第一呢？
如果你也有同样的想法，恐怕又得失望了。
翻看5月份的iPhone增量数据，会发现一个有意思的情况：
在增量中，828×1792（对应iPhone 11）增速以51.9%遥遥领先第二名的1125×2436。
下面，看下的11月统计的iPhone存量数据：
828×1792已经从占比第四名上升到了第三名，
再看11月份的增量数据：
828×1792的增速不减反增，从5月份的51.9%增加到了最近的63.8%
如果不考虑的iPhone 12系列，828×1792有望接替Plus系列，成为市场占比最大的iPhone尺寸。
在828×1792的设备飞速增长的同时，1125×2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%
过去设计师常用的设计师尺寸是750×1334，但随着iPhone进入全面屏时代，如果再把750×1334作为设计的基准尺寸显然已经不合时宜。
而目前常用的750×1624尺寸对应的机型（对应1125×2436在@2x下的尺寸）无论在存量市场中的占比，还是增量市场中的占比都少的可怜。
而新发售的iPhone 12系列中，也只有12 mini采用了1125×2436作为渲染像素的尺寸。而其余三款，采用全新的渲染像素和逻辑像素。
很难想象1125×2436这个尺寸的设备，还能和过去的750×1334尺寸一样，成为iPhone主流的分辨率尺寸……
设计基准尺寸的选择，除了要看设备的占有率，还要兼顾适配的成本。比如，当有大中小三种尺寸的设备需要设计时，优选中间尺寸作为基准尺寸。
以中间尺寸为基准，无论是适配到小尺寸、还是适配到大尺寸，界面的调整幅度都是最小的，偏差不会太大。
反之，如果选择小或大作为基准，或许页面适配到中间尺寸时感觉还行，但适配到另一侧相对极端的尺寸时，则容易出问题。
界面设计师所用的绘图基准尺寸并非一成不变。回看过去：
设计师用的基准尺寸已经从最初的640×960、变成640×1136、再到750×1334，以及现在的750×1624，已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。如今随着iPhone 12的发布，加上750×1624对应机型在市场中占比的低迷，我们可以重新思考在iPhone众多尺寸中，哪一款更适合作为设计的基准尺寸。
这里先不考虑设计师对尺寸的惯性依赖，只思考适配兼容性和市场占有率这两方面。适配兼容性，按照“大中小”优选中间尺寸这一原则。我们可以很容易的在目前8种iPhone的尺寸（指逻辑像素）中选出位于中间的尺寸：
分别是 375x812pt 以及390x844pt，前者对应1125x2436px ，后者则对应1170x2532px，如果进一步将其转换成大家熟悉的@2x尺寸，则分别对应：750×1624和780×1688
在市场占有率层面，随着Apple逐渐停售之前的设备，新款iPhone的分辨率占领市场只是时间问题。而在新设备中，只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px（375x812pt，对应@2x下尺寸750x1624px）。如果按照此前的经验推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成为最热卖且占比最高的设备只是时间问题。
截止iPhone 12发布为止，显然 390x844pt （对应@2x下尺寸780x1688px）更适合作为今后的设计基准尺寸。
文章来源：优设 作者：海边来的设计师
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着网购成为了人们购买东西的第一选择，各大平台的竞争也逐渐转移到了提升用户体验感的身上。不管购买什么东西，最终都要经历下单这一流程。一个合理的下单流程，往往可以让消费者体验流畅，从而提升对平台的好感度，进而愿意长期的使用。
这是个非常值得研究的内容，最近我在优化商城下单流程的过程中，遇到了许多问题，通过不断地探究，也对整个模块有了更深刻的理解，希望通过总结能给大家带来一些启发。
下面将从目标的提出，结合案例的解说，并最终推到出结论的方式讲解。
作为漏斗模型的最终收口的购买步骤，是购买转化的关键。
但往往有些产品由于对流程没有系统深刻的理解，会有很多迷惑的操作，使得下单的流程相当混乱。我也曾经经历过类似的购物情景，经过一轮谜之操作后，我终于下完单了，但过后会担心刚才买的东西有没出错。
关于流程的优化我们遵循的原则是：先让流程合理了，再提高用户每步操作的效率。
怎么理解合理，必须解决以下两个问题，整个下单流程涉及到哪些步骤？步骤之间有什么逻辑关系？
我们需要洞悉到流程之间是如何串连，信息是如何层层递进并最终达成目的。因为只有每环节解决了对应的问题，流转到下一环节才能更省心。才能避免信息的反复确认，影响操作的效率甚至引发出错。
可以拆分成三个维度考量，第一是页面布局的重点突出的提效，第二是信息展示直观的提效；第三是交互操作简化的提效。清晰的页面信息传达能让用户清楚并了解自己的操作结果，并快速做出决策。
下单流程按需要提交的信息进行拆分，一般下单需要先确定商品（一切影响商品价格的因素的确定，如规格）；其次是订单信息的确认（不影响商品价格，是订单层面信息的确认，如收货人，备注等），而后是订单支付，支付方式的确认。
最后是订单进度的跟踪。这里列出的每一步前提都是上一步内容的确定。只有这样才能做到环环相扣，并且信息流转。
你是否遇到过在逛商城时看到某个服务，想购买时，进入的详情页却没有价格，然后需要你点击咨询客服，打开了一个咨询窗口
卖东西不标价，你卖个寂寞吗？
作为用户的我难免会有浪费老子时间的负面情绪出来，撇开一些特殊情况说，一个详情最重要的两个要素是商品信息和商品价格。因为了解商品的目的是购买，购买的决策需要价格的支撑。
这是一对不可分离的组合，没有价格的商品陈列和没有目标指向的价格都是没有意义的。
那么总结一下：商品详情必备的两个信息：
满足了必备元素展示后，我们还要考虑元素的放置位置，首先是突出重要的元素，其次是浏览顺序符合用户场景。这样才能真正做到提高下单效率，我们来看看下面这个例子:
京东的商品详情作为购物电商商品详情的代表来说一下，可以看到视觉浏览路径是非常流畅的，明确的实觉引导和操作指引，先看价格，再选规格，而后点击购买。
权大师的商品详情虽然页面中这重要元素都非常醒目，但它却没有让用户的决策提效，我猜测费用总计为什么放在这个位置，是希望用户直观看到选择不同的服务项目对应的收费的变化。
可是也忽略了金额作为重要的元素，当用户进入详情需要第一样看到，导致浏览路径有点绕圈圈。
携程的详情可以说是权大师的一个优化，同样的考虑，头部不仅展示了重要的价格和商品信息，给到用户购买的预期。在规格选择后，预定按钮旁边还展示商品的总价。减少用户来回查看金额的不便。
在购物中，选择商品或者服务的规格是一个常见的操作流程，选择规格的目的有：
以上几个选项，根据不同的业务会有不一样的描述，不过可以概括两个内容，一是影响能不能买，二是能买的话不同规格的选择怎么影响商品价格。
图像化选项，比如颜色外形等规格有图像的描述就更加直观。如果换成文字的话，用户的生活经验会影响对文字解读的结果。
数值化选项，这样不需要选中再查看总价来判断金额的变动情况。很方便地不同选项的价格，方便对比然后选择。
通常门票或者酒店的规格选择会用上面这种方式展示，同样的道理，把不同项目的价格列出来，让项目之间的对比更直观。
下图的例子中参考身高这一项规格说一下，身高的规格本来就是有规律的，比如从矮到高，或者从高到矮。
如果我选择红色规格衣服，身高规格最后两项灰掉了，这时就算我不看具体身高规格是多少，也大概知道红色衣服身高最高的规格没货了。
这时，我想找一个有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
蓝蓝设计的小编 http://www.lanlanwork.com
