手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
这并不是一篇关于设计趋势的文章，而是一篇关于基础的设计准则的文章。如果你是一名 UI 设计师，无论你经验是否丰富，有些设计的基准是需要保证的，有些容易遗忘的细节，需要借助速查清单来进行走查优化。
这份优化 UI 界面的速查清单，就是帮你搞定这件事情的。
首先声明，一个项目中最好不要使用超过2种主要字体。不过这种原则已经广为流传，就不多说了，下面说说更细节的事情：
纯大写的字母文本，要额外拉开字母之间的字间距，提升可读性。
字重超细的字体要谨慎使用。可以使用浅色，但是要根据字体情况进行选择。如果你设计的文本是装饰性也就算的，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分手机屏幕上看起来会非常糟糕。
先说说网页排版。标题通常分 H1 到 H6 总计6个不同层级，但是通常不会全部用到，你需要确保层级最多不超过 4 个，并且控制它们整体的逻辑和一致性。网页的首屏和登录页面上的大标题，可以用最大的那一级，毕竟，富有表现力的视觉排版是当下趋势。
但是其他的文本不要和这个标题文本差距太大。英文文本以Chrome 浏览器为例，正文使用 16px 和 17px 这种大小，并且保留 12px 文本作为最小文本。
另外，同一个段落中，不要同时使用 16px 和 17px 这样相近又不同的文本尺寸，会让用户感到迷惑。
尽量不要在行高上采用自动行高。通常，现在比较流行的做法，是将行高拉高一些，确保整体版面的透气性和可读性，尤其是涉及到大量文本的时候。
在需要突出显示的部分使用粗体。标题、链接、按钮都在这个范畴内。如果将粗体样式应用到全部文本，这样重点就不突出了。
请特别注意文本的色彩。控制好对比度，确保任何类型的显示器上都可以清晰阅读。在设计占位符文本的时候，这个问题特别突出。
留白对于整体设计的重要性是毋庸置疑的。留白的变化有助于设计师理清元素之间的关系，提供节奏感，增加平衡感。
将一个语义块和另外一个语义块分开，最简单的方法就是在两者之间增加一条 1px 的线。但是这并不是最好的方法。
我见过不少设计作品中，界面中一个又一个线条绘制的盒子相互嵌套，复杂无比，每个盒子都是用 1px 粗细的线绘制的。但是，如今的UI界面上基本不用这种手法了，大量的卡片替代了以往的各种「盒子」，通过投影和间距来控制卡片之间的关系。
边距有助于从视觉上来判断元素之间的亲疏关系。当我们考虑一个新闻资讯卡片的布局的时候，它包含有一张图片、一个标题，还有3~4行预览文本和发布日期，那么应该如何分组和间隔？标题和文本应该是一组，这一组和图片、日期的距离更远一些。听起来很令人困惑？看下面的图片你就理解了：
总会有客户或者产品会想把所有的功能和元素都怼到同一个页面或者 APP 当中。这个时候，要你让标题、菜单、文本、特价优惠、社交帐号和电话号码都齐齐整整地塞到一起，同时还要给每个组件搭配上图标。
说真的，这种问题总不能避免。这个时候可以使用这个理由来试图进行沟通：用户一次接收的信息越少，进行有效操作的可能性就越大。循序渐进地呈现信息，能够让人更加愉悦，用户对于信息的接受性也更强。
用户永远都不会费力巴拉地去拆解和分析你的页面布局，紧密局促的布局也早已不符合主流审美和日常需求了。
如果你设计的是海报、Banner 或者是 卡片 等我们所熟知的视觉元素，那么请注意边缘留白的设计。如果按照经典的方式来布置（从左上到右下），那么尽量让上方的留白更大，这看起来会让视觉更加稳当，并且更加具有视觉吸引力。
Logo、图像、图标、背景这些元素决定了整个设计给人的情绪。所以在设计的时候，需要有针对性地挑选和优化。
我并不经常做 LOGO，但是在我的职业生涯中也起码做过 20 个LOGO。我的经验是：好 LOGO 很难制作。但是设计师只要遵循基本的原则，就能创建出像样的 LOGO。
比如仔细选择配色。我有一次看到一家名为 「VIP catch」 的钓鱼用品店，他们使用了紫色的 LOGO，从名字、配色到色彩的选择都和钓鱼这个场景没有一点关系。如果选对配色，有针对性地加入一些和钓鱼相关的元素，其实也就好了。
另外就是，如果你时间有限，就不要试图给品牌 LOGO 设计一个特定的符号或者图形了，因为真的很难做好。最好制作成文本 LOGO，通过微调字体来制作。
元素下方的阴影一定不要用黑色。始终基于表层的、前景的元素来选取阴影的颜色和明暗。通常，一个看起来舒适的阴影是通过多个阴影叠加造就的，一个小且明确的阴影，位于正下方，另外一个阴影模糊且弥散，透明度更高。
任何可以矢量化的元素，都尽量制作成为矢量的。从符号、箭头到 LOGO ，现在都最好制作成为矢量 SVG 格式，方便开发人员嵌入到设计系统当中。PNG 图标的边缘模糊，在清晰度越来越高的视网膜屏幕上，矢量图形元素不仅更加锐利，而且消耗更少的系统资源。
如果你正在为网站处理一组图标，请尽量确保这些图标在视觉风格和细节处理上是统一的，看起来是同属一个「家族」的。这意味着图标的笔触宽度、边框半径、视觉重量都应该是一样的。
除了上面的几个常见的要点之外，我还要额外补充几点，它们很难直接归结为一类，但是同样重要。
很多 UI 界面元素在过去多年的发展过程中，已经形成了认知广泛的「最佳实践」。如果在设计这些 UI 组件的时候，采用打破甚至彻底违背「最佳实践」的做法，比如将图片+标题+ 文本 的顺序打乱，可能会让人感到迷惑。
熟悉的设计并不意味着无聊，你总能够在 UI 界面的一些地方找到发挥创造力的地方，而不是在这些有着清晰规则的地方搞创新。设计师和艺术家是截然不同的职业，在设计过程中，创意冲动应该在不干扰用户体验的前提下，进行发挥。
在设计移动端 UI 界面之前，应该和开发人员进行充分的沟通，这一点很重要。iOS 和 Android 端的 APP 的尺寸还相对固定，但是如果你设计的是移动端的网页，那么可能涉及到的页面尺寸就非常多了，这个时候就要用到断点非常多的网格系统来进行响应式的设计了。
Lorem Ipsum 在中文中叫乱数假文，它是自动生成的一种占位符。在如今的设计领域当中，直接使用乱数假文看起来非常不专业，因为无论是 Sketch 还是 Figma 当中都有太多的插件，可以帮你生成符合语境的占位符内容。在此基础上还有另外一个要点，就是展示性的组件内容也不要简单地复制，尽量使用不同的图片和配色，让它们看起来更加真实。
这份UI快速检查清单目前是比较符合当下 UI 设计行业的需求的，但是它并非是教条，在特定的情况下，你可能不用遵循它。当然，在多数时候，这份清单能够帮你让设计更加优秀。
1、字体版式
1.1、注意大写
1.2、注意超细体的字体
1.3、标题和正文字体尺寸
1.4、行高
1.5、文本和标题的层次结构
1.6、文字对比
2、间距和边距
2.1、去掉多余的框架和线条
2.2、梳理从属关系
2.3、少即是多
2.4、屏幕边缘留白不均匀
3、配色和图像
3.1、关于 LOGO
3.2、阴影
3.3、图标和图像
4、其他设计常识
4.1、避免使用怪异的布局
4.2、布局尺寸和参数
4.3、乱数假文
结语
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前我也无意中看到饿了么把「超级会员」改成了「吃货卡」，感觉还不错。虽然并不了解饿了么的会员业务，但这次改版体现了一些有趣的设计思路，正好对应了我们在设计上的疑惑点。于是就着该读者的问题，一起来聊聊其中有意思的点。
比如，如何在同质化的功能上做出一些创新且有价值的改变；如何降低营销感，把商业需求统一到用户需求上；如何不需要再纠结今天到底吃什么了……
我们「以为」的，就是真实的吗？
今天的文章，从一张图开始。
在《认知与设计》的第一章里，作者提到了关于感知的话题，在影响感知的几种方式里，第一种就是「感知的启动」，其中很典型的案例是下面的一张素描，你能看出画面中是什么吗？
一条斑点狗。
或者你没看出来？如果你看到了这只狗，就很难再回头把这张素描看做随机无序的点了。就像书里说的那样，我们看到的很多东西取决于别人告诉我们它是什么。
产品功能也是如此，它告诉了我们这是什么，我们就会这么认为。如果一开始设计的就是吃货卡，也许很多人不会想到它是会员的变体，而是仅仅当做一个福利卡来看了。对于超级会员和吃货卡的感知差别仅仅在于定义上的不同，而非本质的改变，这是很有意思的一个点。
拿生活中的一个例子去看，相同的杯子，我们可以叫它咖啡杯，同样也可以叫它养生杯，当面对不同的叫法时，我们是不是就会产生不同的代入感？
而产品大多数时候都是通过渲染场景、营造氛围来达到这个目的，我们通常将其称之为产品定位。
所以产品需要定位，需要一个鲜明的形象，然后让产品中的所有信息、功能、风格、色彩都去表现它，才能树立起用户的认知，带来深入人心的记忆点。于是，相同的功能在不同产品中的差异除了内容的填充、使用的方法、规则的定义外，还可以改变的就是 —— 包装。
就饿了么这次改版的「吃货卡」而言，它本身并非一个新功能，只是「超级会员」的一个变体，会员的本质就是产品根据用户的投入而给予的特权。所以产品只是集合了这一部分有投入有特权的群体罢了，至于怎么称呼，会员也好、吃货也罢，在产品层面都是一样的。
会员，官方的解释是：通过正式手续加入某个会社或专业组织的人。
在任何地方，我们都可以成为会员，但不是任何地方，我们都能变成吃货。所以吃货卡这个定义，一下子就把强烈的产品属性透传了出来，并联结了我们的目标用户，会员的「积分」也自然地转化成了「吃货豆」，这种概念上的改变，就是一种包装。
这是我在这篇文章中要聊的第一个点，就是通过品牌塑造来重新包装一个功能，而包装的形式要依附于产品定位。
第二大点，我们来聊营销广告与产品功能的碰撞。
在广告滥用和形式多变的今天，我们已经逐渐习惯至无感那些具有丰富色彩和设计元素的广告内容，以至于可以自动筛选出它们，打上标签，从我们的视觉中过滤出去。
但总有一些广告似乎天生具有一种隐秘的商人气质，带着精明的窥探，去诱导大家浏览、点击、分享、消费。
广告是产品的一种营销语言，而营销有时就是让利，以广告的形式，通过优惠与福利来抓住用户的心，而用户往往会认为这是欺骗。那么当商业目标和用户目标无法趋于一致的时候，我们又该如何让用户为产品站台呢？
首先，对于广告的刻板印象常源自我们接触广告的失败经验，其大致可分为三类。
第一类「虚假利益」。夸大好处，或拿非最终的利益引诱，直到我们了解了详情才发现自己是个被骗的傻瓜。
于是，产品通过弱化营销性的信息流广告，并加上清晰的广告标签，公开透明的让用户感受到自己被平等地尊重，即满足商业利益，又解决了用户的诉求问题，将两者利益统一。
但这一类并不是我们今天要聊的重点，我们继续往下看。
第二类「难度操作」，比如那些假的关闭图标、广告背景中极小的跳过按钮、或者在领取福利时的层层步骤，都是用户在接触广告时难度操作的体现。
前两种对用户来说无法原谅，而最后一种往往会作为一种营销策略，去增加用户获得奖励前对产品的投入，比如浏览、转发、消费等，这是没有问题的，关键是用户是否提前获知了我们得到奖励的所有条件。我们厌恶的，是超出我们预期的那些负担任务。
吃货卡的任务模块在优化后就直接展示了任务详情。但是首页领任务的提示却隐藏了任务的重要条件，比如「下 2 单，赚 400 吃货豆」，实际是两笔超 20 元的订单。那是否会存在一类用户，没有点击查看详情而直接下单，下单之后，发现并没有完成进度？因为外卖费用没有超过 20 元。
如果产品是担心用户因为 20 元的门槛而不做任务，那么在点击查看后的任务详情不是把这一类用户推向进一步的否定吗？我们因这样的手段能够额外获得多少增长，同时，又有多少用户因此对所有的任务失去信任，我们无法准确计算，因为得到是显性的，而失去是隐性的。比如一些音乐产品的会员机制，用户办理好之后想听某首歌，发现还需要另外再付费，于是卸载了软件。
另外，改版后吃货豆的领取方式也对应发生了改变，不是直接的发放，而是转为点击领取。
虽然趣味的动效消解了部分用户对冗余操作的厌恶感，但还是能从反馈渠道中看到用户对这种强制限时去领取奖励做法的反感。这种领取模式也可说是一种变相签到，只不过这种签到的奖励不是你通过额外行为主动赚取的，而是在已经得到的情况下被迫操作领取，和支付宝领取积分的方式一样。限定时间内不领取，还会消失。
游戏积分的领取，之所以有领取操作，是因为积分积攒的宝箱奖励，是额外的收获。玩家玩游戏的目的是体验游戏而不是为了积分与宝箱，这两者之间是有差异的。
多余的操作看起来增加了页面的曝光度，带来了更多的转化可能，却「实在」地提高了用户获得奖励的成本，从而间接降低了奖励的价值，因为投入产出比太低，所以用户常常宁愿放弃这样的奖励。
产品想要让用户感觉到方便和实惠，体验满意，但又通过这种点击才能领取的方式，强制绑定用户与页面，来触发用户的下一步行动。表面上可玩性增强了，实则是体验感的缺失。
第三类是关于「过度选择」。交互设计有一本经典的入门书籍叫《Don’t make me think》，描述了如何通过设计帮助用户理解与操作，来提高产品的易用性。同理，当我们思考营销在产品中的表现时，难道就不需要考虑用户了么？
过去的营销就像过去的产品一样，以产品实现而非用户为中心，表现产品的实现方式而不去考虑用户的心理模型。
比如软件需要我们命名才能保存，特别是系统自带的记事本软件，不仅需要自己输入文件名，还用 *txt 占了命名位，使用星号让我们无法直接保存。相比之下，很多软件已不再需要用户命名，会直接提供默认命名，还有像 Typora 这类产品，可以自动将我们的第一段文本内容作为默认文件名。
对营销而言，以实现为中心的设计想法体现在制造了尽可能多的活动类型和规则上，希望触达不同的用户。而事实是，在过度选择的压力下，很多用户直接选择了忽视。
如果去看饿了么会员旧版的设计，我们会发现它有红包、奖励金和折扣商品三类福利，三者的关系是相对分离的。
其中的规则是，当我们成为了会员：
所以我们有三种获得红包的途径：领取、购买、兑换。
再看新版吃货卡的设计，在直接领取与购买红包不变之外，新版强调以用户的消费去获得奖励，不管是直接兑换红包或者兑换店铺的专属红包，都是以吃货豆兑换为核心。相比旧版，将商铺折扣商品，替换为吃货豆兑换专项红包，其实本质是一样的，无非就是为了提高吃货豆与吃货卡的利用率罢了。
在这样一个前提下，产品增加了红包类别，给予了用户更多选择的自由。虽然随着红包的分类维度变多（专享和吃货联盟的红包、特定品牌和分类的红包、具体店铺的红包），产品的规则趋向复杂，但是理解变简单了，我们也只需要做好兑换这一件事就可以。
复杂的规则仍然可以呈现出简明的设计，我们不需要用户来负责过滤这些复杂信息，而应当要求产品，站在用户这边，去降低理解成本。自然地，产品与用户就能并轨而走，商业需求与用户需求也可统一。
当然，或许也会有用户反感这样的功能被活动化，但不得不说，这确实是一个品牌的升级。
这篇文章从几个角度聊了「吃货卡」好与不好的地方。
当然它不仅仅是一个会员功能的改版，在概念玩法上也是一种升级。从设计角度看，确实有创意的表现，虽然也有不可取之处，但是它背后的设计思考是值得学习的。
我们知道，设计虽然会受到许多框架和规则的限制，但从问题出发，思考方案的过程才是设计本身最有意思的地方。好比游戏，也是因为规则与框架的限制，以至于才有了如今丰富多彩的游戏形态。
所以即使看向那些常规的功能和成熟的设计，我们也可以融入一些不一样的东西，站在过去到现在的经验上，再做出一点改变，使其更具可玩性。
文章来源：优设 作者：呆呆U理
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
与传统PC桌面不同，手机屏幕的尺寸更加小巧操作，方式也已触控为主，APP界面设计不但要保证APP功能的完整性和合理性，又要保证APP的功能性和实用性，在保证其拥有流畅的操作感受的同时，满足人们的审美需求。
接下来为大家介绍几款手机appui界面设计
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— 「七秒钟定律」：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这9个区域的场景划分，可以帮助我们非常、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
1. 主色的选择
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于——你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越，比如我们之前整理的一篇总结：
为什么支付宝要换 Logo 颜色？分析下目前 Logo 的主色趋势
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
2. 辅助色的选择
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 「角度原则」，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
3. 中性色的选择
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足RGB的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 「中性曲线」。
掌握对于主色、辅助色、中性色的选择方法，那么对于UI配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，再分别看看它们对应的案例：
1. 主色占比大，色彩丰富度高
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
2. 主色占比大，色彩丰富度低
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
3. 主色占比小，色彩丰富度高
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
4. 主色占比小，色彩丰富度低
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫APP改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
1. 配色流程演示
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
2. 其他配色类型应用
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太适用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
文章来源：优设 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计美观、和可用的UI界面需要花费很长的时间，还需要来回多次的设计修改。
经过不断地调整，最终才能产出令客户、用户和自己真正满意的产品。
在这里，我们总结了一些实用的小技巧，这些技巧可以帮助设计师很轻松地改善设计，并为以后的设计实践提供有用的指导。
当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。
通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
当字体变小时，增大行高可以获得更好的可读性和易读性。
这里介绍两个容易被混淆的概念——行高和行间距：
设计时不必总是用多种颜色来填充设计。
如果项目允许，只需使用固定的色板，通过选择基础色，然后调整色调和颜色深浅，利用这种简单的方式为设计增加一致性。
通过结合使用字体大小、权重和颜色，可以轻松突出UI中最重要的元素。进行简单的调整即可使用户体验更好。
在设计UI图标时，要保持一致。确保它们具有相同的视觉样式，相同的比重、填充或轮廓。
图标通过视觉手段为用户提供必要的信息，所以保证功能相同的图标元素一致，外观视觉一致。
通过使用颜色对比、尺寸和标签，确保「行为召唤」尽可能突出。
如果可以的话，不要总依赖图标，也可以使用文本标签，以便用户能更好地理解。
行为召唤：透过设计让用户想到要做某种行为，例如提示用户去触发按钮、文本或图片。
填写任何形式的表单时，在用户刚进行的操作旁边及时出现一条错误反馈，是一个简单但有用的额外视觉辅助。
设计要在产品内部使用的菜单时，请确保在屏幕上突出显示最常用的操作(如上传图像、添加文件等)。
文章来源：优设 作者：Clip设计夹
与传统PC桌面不同，手机屏幕的尺寸更加小巧操作，方式也已触控为主，APP界面设计不但要保证APP功能的完整性和合理性，又要保证APP的功能性和实用性，在保证其拥有流畅的操作感受的同时，满足人们的审美需求。
接下来为大家介绍几款手机appui界面设计
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。几个月来，「历史性的」、「百年难遇的」、「前所未有的」、「恐慌性的」、「灾难性的」……这些词儿，如同弹幕一般，不停地出现在我们眼前。短短的几个月，许多人变了，许多家庭变了，许多事情变了，但生活还在继续前行。经历过特殊的时刻，在京东的我们，比以往任何一个时刻都要忙碌，也比以往任何一个时刻更能清晰地认识到：「京东的价值、京东给社会的力量」和「我们的责任」。
我们怀着期望，期待我们每一次的改变，都能给你们带来更多的能量。
2020 年初夏 618 来了，京东的生日之际，京东 APP9.0 全新升级，希望你们会喜欢～
1. 品牌力升级
5 月 20 日，京东零售集团宣布进行品牌升级，由原来的「多快好省」升级为「不负每一份热爱」。作为京东集团品牌战略承接的主阵地——京东 APP，将基于全新的品牌精神，着力于满足消费者的多元化、个性化的购物需求，持续对其创造更大的价值。用户在京东不仅仅能享受到好的购物体验，还能享受到更丰富、更用心的产品和服务。通过对京东 APP 不断地迭代升级，我们也向社会、向消费者诠释着京东的每一份用心；京东 APP 也承载着每一个家庭、每一位消费者对美好生活的向往，不负你、我、他（她）的每一份热爱。
2. 产品力升级
未来的 1-3 年，京东将继续在低线市场、低渗透品类上提速；通过对新老渠道、新老内容的矩阵开拓和整合，将单纯的线上购物，升级为全场景的复合式体验；通过新玩法的打造，增加用户的触点，提升粘性和频次。为了更好地承接京东战略与方向，京东 APP 的产品力也亟需升级。
3. 体验力升级
除了品牌力、产品力升级，每一次全新「京东 APP」的到来，也在为消费者不断提供更友好的使用体验力。我们也非常期望能够借助这次版本升级，对京东 APP 进行既精细、又完整的刻画和打磨，期待通过京东 APP9.0，与消费者进一步拉近彼此的距离，让体验更加细腻、更加灵动，全面升级消费者在京东 APP 的体验力。
结合京东 APP9.0 的品牌力、产品力、体验力的升级背景，我们追本溯源，探寻京东自己的脉络。
设计策略的延续升级
基于京东 APP 的核心目标，围绕购前、购中、购后三个环节强化用户内心感知，承接京东的战略在 APP 内的落地。
京东 APP4.0-5.0 主要围绕京东品牌对用户的传达感知进行输出，建立京东的品牌形象；京东 APP6.0 后开始加强场景能力，逐步打造可以满足千人千面的电商设计平台，直至现在，扩宽至全渠道场景，为用户提供更全面、更加细分的体验。
始终围绕产品策略
设计的迭代和产品思维绑定，始终围绕产品策略，一起共建用户的同理心；通过深耕设计解决方案、持续验证推导，来打造值得用户信赖的优质购物体验。
设计将各模块的功能与价值主张相结合，彼此进行联动，保障从产品到交互到视觉，到最后的方案落地都能围绕一个核心目标去服务。
京东 APP 设计始终都是以「产品、业务目标」为核心，围绕「品牌」「用户」「认知」三大方向，结合「设计趋势」来发力；但基于不同的情景、当下 APP 所处的环境，设计改版的侧重发力点有较大的差异；一般来说是「用一个版本来解决 1-2 个的重大体验问题」。
我们结合京东 APP8.0 以来的用户研究报告、用户反馈、各关键模块的数据、竞品对比，从「品牌」「用户」「认知」这三大维度着手，梳理京东 APP 的核心体验问题，进而推导出京东 APP9.0 要解决的核心问题，作为定义京东 APP9.0 设计策略的关键依据。
1. 品牌设计 ——京东APP8.0问题提炼
在细分用户的研究中，用户高频地提到 APP 的品牌感知过于冷静、直接、有距离感，氛围上不够活泼，也存在「京东是正品但价格会不会更贵？」的疑惑。打个比方，可能同样的价格，吆喝声越大，感受上会觉得大声的更便宜、更有爽感。
视觉定义上，一方面，栅格定义过于精细，影响了信息传递的流畅度，需要针对导购类、流程类场景进行差异化删减；主流程内的部分模块留白偏多，拉低了一定的屏效；另一方面，字体的部分梯度比较多、也比较相近，虽然视觉上较为协调和统一，但视觉噪音较大，对主体内容也有比较大的干扰。
人机交互时，过于直接地强调目的性，品牌灵动感待提升。
通过数据测试发现，核心模块的引流效率还有较大的提升空间；两个例子：1、可通过「严格控制变量，测试图片素材的引流效率」，提升「图片素材」的质量，优化核心模块的设计规范；2、通过「图片素材」的质量提升，加上对「坑位容器」动态打磨，经过数据测试，增强品牌灵动感的同时，可进一步提升屏效。
2. 用户感受 ——京东APP8.0问题提炼
细分垂直的用户群，在全流程内的感受上存在割裂感；各个垂直人群在 APP 主流程内已初步形成大的体验闭环框架，但体验闭环的细节还有待补齐与提升，对垂直人群的「权益和身份」的传达还需要在情境上更加一致。举个例子：未开通 PLUS 会员时，高净值人群对 PLUS 身份认同感还有较大提升空间。
商品的活动促销信息展示（时间、最优价格）层级隐藏较深、活动促销计算复杂难以理解，用户促销感受比较弱，所谓酒香真是怕巷子深。我们通过「用户在不同平台内促销感知」的用户测试对比发现，虽然京东的价格最优惠，但由于在表现层上没有进行强调，导致用户在价格感受上存在偏差。
产品感知较理性，主流程内氛围不够活泼，有距离感；这一点，新兴市场用户的感知尤为明显。
3. 认知统一 ——京东APP8.0问题提炼
页面框架一致性问题：主流程过往的版本较为侧重于单一模块内的设计，各个模块间堆积了较多设计不统一的问题。
页面内模块一致性问题：主流程的各个模块内，由于 「新旧版本」「需求不断叠加」等原因，也存在模块内的统一性问题，这增加了用户接受信息的负担。举个例子：APP 结算页在过去的一年内新增了较多的功能与提示场景，由于业务时间有 deadline，很多需求会采用体验降级方案，即用现有控件来设计方案，使得最终方案可能体验不够好，而这里埋下的体验隐患，日后依然要找机会解决。
业务和功能类型不断增加，这会导致页面相对臃肿，这时核心流程的框架亟需重新定义、向三维空间借力来舒展信息架构。
APP 整体的故事性连接还有待强化，货架式的流转只是骨架；各频道内、各模块内也应基于 APP 骨架保有自己横向与纵向故事线，在 APP 内注入故事性的血肉灵魂；让用户在 APP 内流转时，认知更清晰、体验更丰富。
1. 品牌力设计策略
延续、强化京东品牌，构建、升级「京东设计语言体系」 ，提升屏效。通过统一的强调，使品牌可知；通过情感化、IP 化、故事化的表达，使品牌可感。
色彩体系：延续京东品牌调性，主打京东红的品牌色，适当地通过增强配色、减少留白，在保留京东辨识度的同时，通过丰富的色彩体系降低 「冷淡、有距离」的感知。
例如：结合首页及推荐位的坑位颜色，拉通营销色彩规范，HSB 平衡所有色彩梯度；并结合算法给出冷暖色排布规则，区分内容丰富画面（包括首页核心楼层/我京工具与服务/用户资产我的钱包）及核心流程 HSB 平衡，色环关系，品牌色的延伸主导，再到单色、渐变的规律体验，全路径的感知；拉通京东品牌色同阶梯色环，推导所有辅助色色值，根据透明度及饱和度叠加，得到色彩使用场景及渐变关系；提炼营销体系核心规律，营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。
营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。（核心楼层为例）
字体体系：延续京东的字体建设，延续性的使用京东朗正和正黑体、加大主字号、精简字阶，拉开字体层级梯度，让用户的关注点更聚焦。针对下沉首页等重点业务采用异形字体，标题与利益点字号字重比重更大，强化营销引导。
icon 体系：线性图标全面 iconfont 化，减少 app 的体积；图标设计更简洁，减少隐喻的手法，让用户「一眼即懂」；平衡视觉的体积差，建立一致性的图标绘制尺寸规范；适当的设计图标互动的微动效，增加趣味性，带给用户「愉悦感」。
栅格体系：在屏效留用率上，基于 8.0 基础定义扩展 12 、24 的倍数关系，栅格做相应的简化；比如在首页/搜索/商详等页面，利用删格缩减间距，提高单屏屏效；首页核心楼层，利用减少间距，放大商品图片，压缩整体楼层高度，使核心内容更加突出，更便于用户识别到有效内容；
优化界面布局，巧用视觉动线，利用人们阅读的 f 型习惯，聚焦用户阅读内容；
素材设计体系：一方面，打磨坑位容器，采用动静态容器相结合的手法。另一方面，打磨坑位素材规范，动静态素材结合使用。同时，尝试压缩容器高度，与羚珑智能设计系统深度合作，进行素材和页面的测试，对运营设计的素材规范进行打磨，在容器高度压缩的同时提升素材质量，保证浏览效率不下降。
2. 用户设计策略
细分用户群体，增强氛围感知、让体验更丰富，层次更清晰。根据细分用户的习惯性、常识性认知，适当地把产品进行分层，让可知可感更加贴合用户；基于全局的统一，有意识细分用户的体验，加强各垂类用户最在意、最可感受的局部差异，从而让体验更加丰富。
PLUS 会员：提高 PLUS 会员身份认同，通过全流程内 PLUS 会员皮肤、氛围品牌一致性露出， 强化「PLUS 专属优惠价格计算」 「PLUS 到手价强化」等权益的感知，进而强化会员身份的感知、加强对 PLUS 会员的认同感。
家庭银发人群：渲染家庭情感氛围，强化优惠及促销的利益感知，简化整体的使用流程，中心化界面采用大字号，为银发人群设计。
新人用户：打造新人专属首页，强化新用户引导，多流程定投新人大礼包、发放新人专属优惠，全方位助力新人用户转化。
校园用户：着重打造年轻化的视觉氛围，拉近与校园用户的距离。
新兴市场用户：扭转用户品牌认知，基于特定人群偏好的氛围组织界面，提升流量分发效率。针对促销较为敏感的人群，通过设计的强调，加强用户低价感知，强化活动促销感知，打消购买顾虑。
3. 认知设计策略
品牌金字塔理论认为关于品牌认知的一系列表象指标，如认知度、美誉度、购买率、满意度、推荐率等，实际上反映了消费者对一个品牌认知的深入程度；这个理论，同样可以适用在产品的用户认知上，认知是一切的基础，产品的用户认知做好了，转化、推荐、满意度才能做好，能够被认知的产品更容易加强情感连接；反过来，不容易被用户认知、认知有负担、信息架构表现层复杂的产品，用户理解起来可能就有障碍，再叠加情感连接的设计，那有可能就是体验的自嗨了。
京东 APP9.0，将针对用户的主流程，骨骼精细化重构、优化流程动线，给用户提供一致性的体验，让认知减负。
4. 感受设计策略
消费者在只有认知的时候是理性的，而基于认知产生好感的时候就会变成感性。
在简化用户的信息认知的基础上，我们将强化打造「京东语言的品牌动效」在核心流程内的模块感知，结合产品的产品领域动态衔接的诉求，在设计上考虑动态效果对「整体上下文，故事连接性」的亮点承接，让用户理性购物的同时，感受到感性的愉悦。
1. 用心设计每一眼感受
设计策略：延续、强化京东品牌，完善并深入刻画京东设计语言；通过设计的语言体系，提升屏幕效率，从而带动流量分发效率、运营效率的提升。
首页视觉风格焕然一新，更灵动、更轻松。（通过 IP 和品牌辅形融入、优化色彩体系等方式，强化京东品牌；通过优化栅格系统、字体系统、色彩体系、动态效果，让界面的信息更加清晰，界面感受更灵动）
2. 用心对待每一个群体
设计策略：细分用户群体，增强氛围感知，让体验更丰富、层次更清晰。
设计要点：打造家庭专属购物体验，和家人一起在京东开心购物与互动。设计上通过暖色调和插画的铺陈，渲染家庭情感氛围；同时，界面采用更大字号，为父母量身定制。
设计要点：打造 PLUS 会员中心化与去中心化的购物体验链路；通过设计走查与用户测试，填补 PLUS 会员在全流程内的品牌、信息触点缺失；同时，从品牌、视觉、交互三个维度，统一设计语言、语境、对话方式，让 PLUS 会员在各个体验触点都能感受到一致的人机交互体验。
3. 用心打造每一个场景
设计策略：基于京东设计语言体系，构建场景；骨骼精细化重构主流程，构建「场景动线」，让体验更流畅。
设计要点：京东到家、便利店、商超、药品、鲜花等门店商品全面入驻京东 APP；用户在主流程内即可以直接搜索下单附近的门店商品，下单后最快 15 分钟内便可送达；由于到家场景依托于主流程，我们在设计时期望用户购物动线能与主流程统一，在商品池打通的基础上，体验上也能完美融合；同时，设计上需结合 LBS 场景特点，在主购物流程中，强化 LBS 与商品、配送的关联，突出商品促销与门店配送时效。
4. 用心打造每一条动线-多元化导购
设计策略：基于「京东视觉语言体系」，细分用户群体构建导购方式；根据用户特性，强化放大「多元」的体验。
设计要点：直播全面渗透，全流程强化直播触点，增大直播的分发场景的用户接触面积；同时，通过动态强化、设计强化的手法，加大对商家私域直播的引导，完善直播场景的体验。
5. 用心打造每一条动线-购物动线优化
设计策略：基于「京东视觉语言体系」骨骼精细化重构购物动线，统一交互、视觉语言，视觉降噪，让认知减负。
6. 用心简化每一次决策
设计策略：关键信息强曝光，统一交互视觉体验；让认知减负，决策更简单。
大促氛围优化：在主流程内突出大促的氛围感知，强化搜索列表、商详等主流程内的大促氛围；结合大促情绪指数设计氛围，逐渐调动用户的热情。根据用户的身份、商品的特性，在设计上突出重要信息，例如强化 PLUS 会员促销腰带等；同时，借助设计规范和设计组件，页面内弹层更加容易拓展、可自由配置。
到手价场景展示：商品详情、购物车内强调商品到手价，在设计上突出优惠结果的传达，让用户一眼便知。
7. 用心满足每一次闲暇
融入品牌、IP 元素，用心打造新颖、有趣、持续的互动玩法。
8. APP9.0
京东 APP9.0 是一个新开始；我们将用未来的时间，用心跟大家诠释，京东全新的品牌价值主张「不负每一份热爱」。用心对待、不负期待、不负热爱，我们在路上……由于篇幅有限，本文就不展开分析详细的设计方案了。
文章来源：优设 作者：京东设计中心JDC
通常产品经理在立项前都要思考需求的实现方式：是原生做？还是 H5 做？
问题的答案会因实际情况有所不同，如果追求体验，那原生效果更好，如果追求短频快，那就选用 H5，或是两者结合。
CCtalk 是个涉及 7 大端的跨平台产品：iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中（尤其是用户增长类的项目）越来越多选择用 H5 实现，然后以低成本适配方式应用到不同客户端。
这样做的好处在于：
降低了开发成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 实现）、H5 这 4 个端的开发人员，现在采用内嵌页的方式，可以做到完全不涉及移动端和桌面端，或者仅是入口放置这类比较简单的工作。
降低了维护成本。如果有优化调整，可以只改 H5 页面，不用各个端都动手。
好处显而易见，当然这也不是件一本万利的事。看下面这张 App 和 PC 屏幕尺寸的对比图就明白了，长宽比差异这么大，页面在适配的时候，有时需要优化调整布局。
△ App和PC屏幕尺寸对比
如果要真正做到流畅顺滑的体验，流式布局是最佳选择，但是对设计和开发的要求都很高，维护成本也不小，这让大多数团队望而却步。所以还是自动适配宽度、媒体查询（断点适配）等相对低成本的方式比较香。
如何以低成本的方式做适配？这个问题涉及 2 个方面：框架和页面。
△ 框架和页面
先来看看框架，大致有 4 种：触屏、App、PC、Web。通常一个项目会涉及其中的几种，也有少数情况都涉及。（此文暂不讨论小程序，有机会再写一篇关于小程序设计的文章）
1. App
CCtalk 用的 App 框架容器是公司横向团队提供的 Web View，有 2 种：
常规的导航样式。元素包括：返回、页面标题、分享（根据需要选择展示或不展示）。安卓和 iOS 略有区别，iOS 为了导航栏的顺滑过渡效果，用的是同一个 Web View，所以无法满足在一系列页面中部分页面有分享按钮，部分页面没有分享按钮。安卓用的不是同一个 Web View，所以没有这个问题。（此处不展开讨论）
透明头部导航。常规导航无法满足一些个性化的设计需求，所以透明头部导航就应运而生了。可以对导航栏进行自定义设计，营造沉浸式的体验。
△ 2种头部
2. PC客户端
PC 客户端的框架导航包括：返回上一页，返回首页。页面内嵌时，要留意容器导航和页面导航是否有重复或遗漏。假如要保留页面导航栏，那需隐藏返回按钮；如果去掉页面导航栏，则需将导航栏上原有的操作（例如分享）通过悬浮等方式保留。
△ PC端的全局导航
一般的设计流程是：先设计触屏页面，再去看看 PC、Web 页面是否需要调整。
响应的总原则：提高屏幕利用率。
具体评估标准有 3 点：
页面元素从小到大可分为：控件→组件→模块→页面，按照不同维度的复用，并结合自身的项目经验，整理出 3 种常见的方法（此处是重点，看我看我）。欢迎小伙伴一起讨论补充。
△ 3种常见的适配方法
这种方法最简单，几乎不用动脑子。具体实施方式又分两种：
案例1-拉到指定宽度：
像帖子这类结构简单的内容页一般都可以直接拉伸。注意检查是否有遗漏操作，一般在 PC 端可以采用悬浮按钮的方案将移动端的操作保留。
△ 帖子页
案例2-居中显示，两边留白：
如果页面直接拉伸给用户增加了操作成本，可以采用将主体内容居中，页面两边留白的方式。
实名认证项目是将同一套实名认证流程复用到 3 个不同的使用场景中，所以页面需要适配触屏、web、PC 弹窗 3 个框架尺寸。如果将触屏页直接在 Web 上拉伸，那不仅样式上不美观，而且右侧的「修改」、「获取验证码」等操作按钮距离左侧的标题太远，根据格式塔的接近原理，右侧的一列蓝色操作反而会被误以为是一个整体，脱离和主体的关系，不易于操作。所以我们的做法是放弃拉伸，而是将主体内容居中显示，页面两边留白。
△ 实名认证页
这种方式虽然简单，但也要注意可能会涉及一些细节调整：
如果所有页面都能这么轻松适用于各个不同端，那对设计和开发来说真是省心省力，皆大欢喜。然而现实不会这么顺风顺水，有些页面放到不同的框架内会「水土不服」，这时就需要设计师出马做些调整。
这种调整适用于有图片和列表的页面。从设计层面改动不算大，而且开发量适中，开发也比较能接受。
案例1-排行榜
在课程排行榜项目中，有一个榜单列表页，展示榜单的具体排名和奖励等信息。
如果直接把触屏页面搬到 PC 端，满眼是大写的「丑」，从设计角度分析，用户的阅读负担和操作负担也过重，屏幕利用率低，鼠标滚了半天也没看完一半榜单。
△ 直接拉伸——丑&不好用
所以这个页面需要设计师改造一下才能适配到 PC 端，具体怎么做呢？
我们来分析一下它的页面框架和模块。页面从上到下分为：奖励 Banner、tab 区、列表区和我的排名 4 部分，结构相对来说比较简单，在 PC 端可以保持大的框架结构不变。
△ 页面结构
因为移动端是以纵向为主的屏幕，而 PC 端是宽屏，需要进行调整的模块分别是：奖励 banner区（图片类），其他名次列表（列表类）。对于图片适配，在这个项目中可以采用不同端使用不同比例图片的方案。对于列表适配，在 PC 端由 1 列调整为 2 列，以提升阅读效率。
△ 保持页面框架，调整图片和列表模块样式
案例2-课程售卖页
图片的适配处理，除了采用不同比例的多套图之外，还有另一种方式——保持图片比例不变，调整页面布局。将图片和标题从上下结构改成左右结构。
△ 课程售卖页
小结：
保持页面框架，调整模块内样式的方法适用于结构相对简单，有图片和列表等特殊元素的页面。
对于图片适配，有 2 条思路：
如果页面模块多、结构复杂，靠小改还是会造成阅读障碍和操作负荷，那就要用方法三——模块级复用，重组页面布局。
案例-课时学习页
课时学习页是个多模块的复杂页面，分别有视频播放区、课时基本信息、目录、网师、评价和推荐。整体思路是将页面结构由 1 列调整为左右 2 列，以此来提高屏幕的利用率。
模块的具体位置根据其重要性以及和内容主体的相关度来排布，例如目录：从平台角度希望用内容吸引用户，增加观看时长；从用户角度是需要经常点击切换的，对于这种重要性高又操作频繁的模块，当然应该放在第一屏内。例如推荐：和内容主体的关联度不高，所以优先级低，放在右侧较小的区域内。
△ 课时学习页
在复用模块时，要注意是否有手势操作的场景。如果触屏端有左右滑动的模块，在 PC 端适配有 2 种做法供参考：
另外，要注意浮层的特殊处理。手机端一般通过浮层展示更多信息，在 PC 端适配时，需将浮层调整为固定模块。例如移动端吸底的课程介绍浮层，在 PC 端改成固定在目录下方。
△ 浮层的适配
以上是我结合项目经验总结的 3 种低成本页面适配方法。当然，在具体的适配中还会遇到许多细节问题，需要 case by case 去处理。
文章来源：优设 作者：鱼游设计
蓝蓝设计的小编 http://www.lanlanwork.com
