手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
还有精美的天气app赏析
--手机appUI设计--
--精美的天气app设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
在9月底双十一临近的关口上，淘宝上线了 9.13 新版本，对首页做出了巨大的改版，堪称这 5 年来力度最大的改版幅度。
我们先来简单看看新版本有哪些重要的改进：
如果只是通过视觉角度上来看，新改版必然是比过去的老版本 “清爽” 得多，毕竟精简掉了大量的内容。尤其是两个分页器组件，除了占空间外，实在找不出什么要去点击的必要。
轮播图从顶部撤离和瓷片区进行合并，是一个比较有趣的设定，不仅广告图的面积减少，而且营销推荐位全部集中到一起，使得模块的划分更集中。
现在的首页从上到下的结构即：
如此化繁为简的改造发生在淘宝APP身上，就像看一出浪子回头的感人戏码…
但不要这么容易被结构上的改造欺骗，改版后的淘宝降低了模块的数量，但只是把减少的元素在其它地方呈现。即这次改版的重点——推荐瀑布流。
细心的同学应该都发现了，瀑布流卡片已经出现在了第一屏的底部，即使不用上滚也可以看见卡片的头部了。
并且瓷片区也采用了瀑布流式的双列布局，通过瓷片区白色背景的衬托，这半截露出的图片反而显得越发显眼，越能吸引我们控制不住自己去上滚一下康康推荐了什么东西。
当我们开始浏览瀑布流的推荐内容以后，淘宝夹带的大量私货就进来了，我们来统计下总共有哪些类型：
实际的卡片类型，可能还不止我罗列出来的这些。这个本来是用来推荐商品的列表，已经演化成一个聚合了算法推荐内容的 “巴别塔”。
而其中最重要的商品卡片，甚至也不能直接点击就跳转到商品详情页中，而是添加了一个中转页面，进一步根据算法推荐相关商品，能直接跳转进详情页的少数商品卡片，应该是有做广告投放的定向导流。
这样改版后的目的，不难分析出目的是为了进一步增加用户 “逛淘宝” 的几率和时间，让本来打开应用就搜索—购买—关闭一条龙的用户，也会不自觉陷入信息流的海洋中去。
可能很多人会觉得，难道不应该让流程更短，购买步骤更容易，才符合优秀交互设计的定义嘛？
下面我们就做一些具体的分析吧！
对于一个商业应用来讲，交互不是为了无条件迎合用户的，虽然无论是 UX 还是 UED 的概念里，都爱强调用户至上论，体验为王之类的。但是…
1. 商业诉求 > 用户体验
只有在用户量高速扩张，商业目标是需要用户获得良好体验、口碑的情况下，用户体验的重要性才和大家在童话里了解的一致。更多的时候，是产品想喂用户吃金坷垃时，我们要想办法让用户心甘情愿的吃下去并快速成瘾。
淘宝通过不同的方式获取了大量用户的数据，资料、喜好、购物倾向等等，在庞大的商品数支撑下，可以通过算法给你推荐无穷无尽的商品，总有你会感兴趣的部分。
只要增加了信息流的曝光次数，不要让用户那么快完事，过早的陷入剁手的悔恨，抽起事后烟……
那么他们就会被这种简单的产品形式俘获，做多巴胺的奴隶。抖音是这样的、微博是这样的、知乎也是这样的。为什么一个购物应用不想着最快的方式促成交易，而是让用户在里面绕圈子，原因也只能有一个 —— 流量。
大家都知道双十一将近，各家电商平台作妖时间又到了。但这两年的电商行业已经发生了巨大的改变，那就是直播、短视频带货形式带来的变局。
这两年，以抖音、快手为代表，兴起的短视频、直播带货风潮，已经成社会的热门话题，薇娅没事就在综艺里和爱豆们一起带货，李佳琦身体有恙上微博热搜，罗永浩靠带货上演 “真还传”……
本来，购物方式的多元化，对于大型平台来讲是非常有帮助的。无论是十几年前就开始出现的社会化电商平台、返利网、或值得买，都可以促进电商行业的繁荣，促进平台和整个产业链的发展。
但是，直播、短视频的兴起和过去的这些行业全部不一样，它们本身并不依附于电商平台，但却拥有海量的流量和用户基数。而当这样的流量引擎在变现问题聚焦在电商时，直播和短视频头部平台就有了和电商平台们叫板的资格。
2. 直播电商规模，不算短视频
主流的数据预测报告中，20年的直播电商规模都会达到万亿级别，直播电商的高速发展是没法阻挡的大趋势，它的发展会抢夺存量用户的注意力，有大量的用户购物逛商品，不在淘宝APP内，而是通过其它平台转化，再进来下单，或干脆在外部下单，这是绝对不能被容忍的。
所以淘宝不仅要紧跟趋势，也要对抗外部的竞争，在今年加大对短视频、直播的投入，也就顺理成章。根据淘宝研究院的数据，过去三年直播带货的规模增长在 150% 以上，是全球增长最快的电商模式。
同时，双十一的直播观看用户 18 年为 1793 万人次，19 年为 4133 万人次，同比增长 131%，对比 618 数据，毫无疑问今年肯定也会保持的增长。
并且前几年淘宝双十一喜欢玩的病毒式推广活动成效已经越来越差，再让用户去集福，首页上增加一大堆烟花缭乱的游戏和活动，已经不能再帮助双十一获得快速的增长了。
所以今年，淘宝在国庆前，上架了首页新版本的设计，在应用形态上押宝信息流的算法推荐机制。不仅要开始改变用户使用淘宝的习惯，也在为后续的双十一做预热，相信届时会有大量的直播内容露出和短视频推荐。
至于还有什么新花样或杀手锏还没秀出来，我们就拭目以待吧……
文章来源：优设 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
苹果在2019年6月发布的iOS13中增加了“黑暗模式”，用户打开“黑暗模式”后，应用界面将会变为深色，随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统，不少APP纷纷推出了深色模式。
使用OLED屏幕的设备，在纯黑色下可以有效降低耗能，进一步延长续航时间。除此之外，深色模式还可以有效解决OLED屏烧屏、费眼的问题。小摹对几款常用APP的深色模式进行了体验，并为大家分享我的体验感受。从这些案例中，或许我们可以找到深色模式流行的原因。
微 信
深色模式是一种可以降低视觉疲劳且有助于用户专注的全新外观。与传统夜间模式最大的区别是，深色模式不仅保证了弱光环境下的体验，在强光下仍具有可读性。
虽然深色模式也被叫做暗黑模式，但并不代表要将底色变为纯黑。如果使用100%的纯黑底色，长时间阅读时，反而会造成眼睛疲劳。微信的深色模式里，聊天背景及主页面底色采用的就不是纯黑，而是深灰色。
此外，纯黑和纯白的高对比度也会造成视觉疲劳，因此微信的深色模式中，使用了浅灰色作为字体颜色，既能保持清晰显示，又降低了对比度，减轻了用户的阅读负担。如果设置了聊天背景，聊天背景图片也会自动调暗，便于阅读。
虽然整体色彩加深，但微信在设计时仍保持着清晰的层次。比如置顶聊天窗口的灰色会比其他窗口稍浅，聊天消息的标题和摘要也采用了明度不同的浅灰色来区分层级。除此之外，微信的彩色线型图标在黑色背景上也变得更具科技感，颜值提升了不少。
微信的深色模式除了可以帮助用户缓解夜间视力疲劳外，在白天使用也几乎没有障碍，总体来说，体验感觉较好。
Q Q
如果说微信的深色模式更加注重颜值，那么腾讯旗下的另一款社交工具QQ则更加注重用户的深夜阅读体验。
首先，微信在切换深色模式时，需要重启软件后才能生效。QQ在切换夜间模式时，则采用了一个平滑的渐变过渡，让用户可以快速适应场景切换。其次，为了减少夜间光线对人眼的刺激，QQ降低了信息与背景的对比度，对用户头像等图片增加了遮罩，使其在弱光环境中看起来更加柔和。
当用户开启夜间模式时，还会有一个设计彩蛋：部分图标会根据模式切换而改变。如消息图标会从笑脸切换为休息的状态，这种具有趣味性的设计，也会拉近用户与产品之间的距离。
豆 瓣
普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。在被用户骂了一轮又一轮之后，豆瓣APP终于也推出了夜间模式。
豆瓣的夜间模式和微信一样，同样保留了五颜六色的图标。同时，豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级，保证了信息结构的准确传达。
在配色方面，为了避免“死黑”让整个界面太过死板，豆瓣在黑色中还混入了蓝紫色，让背景色看上去更加通透。底部导航等主要按钮则使用了豆瓣的主色调绿色，在夜间模式下既能清晰展示，又不会显得过于刺眼，同时也保证了在强光模式下可以正常浏览。
知 乎
另一款社区APP知乎和豆瓣存在同样的问题。知乎在设计夜间模式时，知乎采用了主色调蓝色+深灰色的搭配，深蓝和灰色作为背景，展示出的效果既有强烈的对比，又摆脱了深色的压抑感。
与豆瓣不同，知乎的文本颜色选择了对比度更低的灰色，通过字重进行区分。虽然这样会让整体页面看起来比较和谐，但内容变得不够突出，无法在最短时间看清标题，对于一个以内容为主的社区来说，无疑会给用户带来不太好的体验。
知乎在设计夜间模式时目标应该很明确，即只考虑用户在夜间的使用，因此整体色调都很暗，在强光环境下无法正常浏览。
bilibili动画
B站刚推出深色模式时收到了许多批评，字体和背景色对比不强，视频封面仿佛蒙了一层雾，一刀切的暗化处理，导致用户浏览体验极差。
在最近一次更新中，B站终于对深色模式进行了优化，适度提亮了视频封面和图标的亮度，将多彩型图标调整为了单线型图标，既统一了画面风格，又提升了界面阅读体验。
设计深色模式时，必须注意各页面的配色及对比度都要尽可能地统一。在深色模式下点开B站创作中心或推荐服务中的版块时，加载画面仍然是白色，突然出现的强光无疑会对眼睛造成刺激，对于用户来说体验感也极差。
百度网盘
高饱和度的色彩会在深色背景上产生炫光的视觉效果，引发视觉疲劳。百度网盘的深色模式下，背景接近全黑，图标却没有太大的调整，给用户带来的阅读体验并不好。
同样，由于背景颜色太深，导致百度网盘的文本和背景对比度太大，也存在难以阅读的情况，对于诵读困难症患者来说，在阅读时会感觉文字在旋转、模糊。
在设计深色模式时，除了背景颜色尽量使用深灰色以外，还需要确保绝大部分区域保持深色，尽可能使用数量有限的色彩。把握好对比度和饱和度，才能设计出舒适的深色模式。
综上所述，合理使用深色模式，可以降低屏幕亮度，不仅可以减少耗电量，还能减小对自己或他人眼睛的刺激。除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。对于喜欢深色或黑色系的朋友来说，深色模式更是一种不同于普通模式的全新体验。
除了APP，不少生产力工具也都采用了深色界面，比如PS、摹客等。以摹客为例，用户在进行设计时，深色界面不仅仅能降低眼睛疲劳度，还能突出你的设计内容，打造沉浸式的设计体验。
随着苹果“黑色模式”的推出，深色模式逐渐成为APP设计的流行趋势。作为设计师，也一定要掌握APP深色模式的设计技巧。从上述APP设计案例中，我为大家总结了以下几点建议以作参考：
1.避免使用纯黑色；
2.避免使用高饱和度的颜色；
3.文本颜色选用高亮色，但不宜使用纯白；
4.做好情感化设计；
5.注意结构和层次感；
6.允许用户自由切换深色模式和普通模式。
文章来源：UI中国 作者：摹客产品协作设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间，“左右横滑”的交互方式被广泛应用于各类 App 中。
横向滑动作为手势交互的一个拓展，目的初衷是提升信息“内容和操作”的拓展性。
1. “内容”拓展性：
移动端的任何类型页面内容都可能无法在一个界面呈现完整，因此滑动去呈现更多的内容，常见的当然是纵向滑动。但它无法承载所有类型内容呈现的问题，这个时候就需要横向滑动来解决。
2. “操作”拓展性：
当一个页面的内容已经是固定完整的，这时候需要用户进行一些行为操作，如常见的下载、删除、添加、管理…,而这些行为如果直接呈现在界面上必然导致混乱，因此需要配合一些横向滑动激发这些行为，从而保证界面的流畅体验。
横向滑动从移动端手势出现到现在十几年的时间已经有了非常典型的使用场景，接下来我们就来列举一下有哪些常见的类型：以下从「清晰度、效果」两个纬度进行分解
解决内容拓展问题
这类场景通常是用户最熟悉的，不论从认知清晰度、效果角度都是不错的，主要原因是场景曝光度非常高、频次非常高；比如Android\ios首页横滑切换app入口每天上百次的操作频次；
解决内容拓展问题
这类切换方式适合内容相对聚焦和单一的产品，比如垂直类电商：wish、唯品会，所有内容仅仅是通过类目来区分的产品；微视：内容统一为小视频…;百度地图：横滑查看更大范围地图…;由于内容的高度统一和整合，因此切换难度低，但在认知的初期会稍有一定的门槛，原因是大部分app都是纵向滑动feeds流，而且用户记忆是海马记忆，不会特别清楚记得app的操作，所以新打开app和新用户会有一个认知过程，但门槛不高。
解决操作拓展问题（管理列表、IM列表、通讯录list…）
解决操作问题
在所有类型中的横滑，只有这种方式不是浏览型手势而是操作型，通常这类功能隐藏在列表中，为了保证列表信息的有效性和美观度，选择隐藏操作功能，由于是低频操作，所以初期需要用户发现并成功使用该功能；不过目前很多list页面都采用这种通用的交互手势，因此用户并不难发现。
最复杂也是最容易出现问题的
解决内容拓展问题
这是最容易出错的一种场景，就是在整个界面中只有一个模块采用横向滑动，而其它内容又是纵向feeds流滑动；由于移动端内容的路径多、入口多，因此用户的核心操作流是：找入口——看信息——做任务；在这个过程中任何一个隐晦的、不常见的交互都很容易被用户忽略，比如说：饿了么品质优选、唯品会二级类目、去哪儿旅游推荐…，这些案例其实是为了横向空间拓展更多的内容而做此选择，但通常情况下隐藏内容点击率会骤降，很少有用户耐心的横滑浏览完成，因此设计师要严格把控数量以及内容的质量；在这里还有一种情况是很严重的，就是模块级的横滑内容与纵向列表之间有叠加交互，就会导致用户反复在2中操作中完成任务，这一点非常不建议使用此手势，当然以下案例并没有这种情况。
1. 几乎能够100%适配到所有设备，保持了一致性
2. 为二级信息提供了展示空间，并且不占用页面空间。
比如在图片画廊里的图片，横向滑动可以让用户预览内容，可以划过或者点击查看。
3. 横向滑动节约了纵向屏幕空间。
而不是将所有内容都展示在一个很长的页面。纵向布局让所有的信息都成小块展示。但是横向滑动更加灵活。现在，内容可以在横向和纵向两个方向同时展示。
4. 横向滑动可以让用户预知分类里的内容，通过往一边滑、向下滑，差不不同类别的内容。
两个维度让用户可以在同一个界面中看到更多的类别和选择。
5. 横向滑动的内容需要保持高质量和持续吸引力才能提升点击转化。
1. 挑选合适的使用场景
单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容（比如朋友圈或知乎的回答），而对于 App 首页等多种信息聚合的页面，就适合横向开拓内容维度。
2. 显眼并适宜的主题展示
3. 引导左右滑动（可见性）
4. 控制数量并避免极限情况
5. 低效率和错误的优先级
设计师们都喜欢“左右横滑”的设计，不仅因为信息密度大，页面层次好梳理，更多也是因为操作方式“酷”。但有经验的设计师会尽可能拒绝“左右横滑”，因为它的效率还是太低。而效率低，体现在两个方面：
首先，就像上面说过的，更多的小白用户对左右滑动的预期并不强，还是更加适应纵向滑动的传统交互方式。违反了“Don’t Make Me Think”的基本原则。
其次，纵向和横向优先级常常导致预期错误。以下图 App Store 为例，所谓的内容都是 App，泳道只是用不同的维度把 App 组织起来。
如果你要购买其中一个资源位，你要更高优先级“泳道”中的第二屏位置，还是低优先级“泳道”中的第一屏位置呢？
文章来源：优设 作者：Jingwhale Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
