手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
APP UI设计一直在变化，就像网页设计一样，不停的创作新鲜、友好的产品，设计师要跟上这个趋势，最好的方式就是多看优秀案例，下面大家一起来看看今天的精选，建议访问官网查看更详细的展示哦！
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
精美的天气app赏析
--手机appUI设计--
--精美的天气app设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
最近国外的设计平台频繁出现一类内容，大概类似于「产品设计中的伦理道德与用户体验」，里面的内容有引起我的一些思考。
我先给大家举个例子，来解释一下上面这句话的意思。
以前，我们聊界面的设计，说界面当中如果有两个按钮，就要引导用户走向主要操作，弱化次要的。类似于下图：
这时候一定会有一些设计师告诉你说，这类界面，要以左边这种形式去设计，因为无论从视觉角度、优先级角度还是企业利益角度来说，左边这种都更符合用户操作的逻辑。
或者，如 PayPal 上底部的「移除卡」功能，故意在层级上做的很弱，颜色的处理让按钮看起来甚至是不可点击的。
虽然「移除」对于产品来说是一个危险操作，产品不希望用户进行这一操作。但是对于用户来说，当他们想要这个功能的时候，说明意愿强烈，这时候这种设计会让用户产生糟糕的体验。
于是就有人提出说：
为什么，用户登录注册就这么简单，但是有些用户想要注销账号却如此麻烦？难道对于这些想要注销账号的用户来说，用户体验就不重要了么？
其实，我觉得这个问题，可以从两个角度来说明，分别是「目的」和「义务」。
作为产品团队的一员，我们的价值在于给公司创造利益，想方设法得到用户的支持与广告商的青睐。所以我们设计的产品都会有特定的目的。
比如，引导用户去购买产品或平台中的商品，以让企业能够存活，持续运营下去。
但这并不是说，企业把一些对用户无用的商品卖给了用户，用户买的这份商品，对他们来说一定是有价值的。产品并不是在欺骗用户购买无意义商品。
比如平台支付了音乐或视频的巨额版权费，方便用户在线上收听与观看，那么用户为这些内容付费是否应当？
企业做这些事，从用户与广告商身上获取利益，本质就是为了赚钱，这一点无可厚非。
所以在产品界面的设计中，如文章开头的示例，采用左图的形式，突出办理会员的按钮，引导用户付费成为会员，似乎也没什么问题。
它不过是利用了「信息优先级」的概念。我们需要帮助用户去理解界面上所呈现的信息，目的是为了让用户更好的操作。如果所有信息的权重是一样的，反而会影响用户的使用，甚至造成体验障碍。
而逆向的，比如不办理、跳过类似的出口也有给到用户，虽然从视觉上相对弱化了，但绝不应该阻碍用户去点击。
从这点来说，上图示例的问题不是在弱化了按钮的视觉效果上，而是按钮太小，可能会导致用户误触「去办理」，让不想办理的用户频繁点错；或者过分弱化界面上的重要元素，明明在眼皮底下，却给用户找不到的错觉，这才是根本性的问题。
比如一些引导页，在屏幕上设置了三个类似「跳过」的按钮，结果只有一个是有效的，产品为了让用户点击广告给企业创造收益，利用这样的方式达到目的，这才是所谓伦理道德的缺失。
我再举个例子。
连续包月，相比普通包月，策略大多都是第一个月有优惠价，以引导用户办理连续包月服务。好处是，大多数用户办理了连续包月，就会长期使用，它弱化了用户的决策意识。
除了部分办理完第一个月就取消服务的用户，只是为了这个月用，利用这样的漏洞省点钱，不过这也仅限于第一次办理了。
那么我们作为设计师，就应该从为公司盈利的角度去设计界面，引导用户办理连续包月服务，而不是普通包月，在界面上做出差别。
同样的，当每个月用户需要自动扣费时，就应该告诉用户，过两天又要一次扣费了，做一个提醒。而不单单是成功办理后，就再也不通知了，这是不对的，毕竟用户每个月都在为产品付费，这样的通知是产品的义务。
如果用户办理的是年会员，已经单次就付清年费，那就没必要反复提醒（也没什么可提醒的）。
在这个例子中，用户体验与伦理道德的界限很清晰，所以我并不觉得它们是相互矛盾的。
我们还可以举很多例子来说明这个问题。
比如 Windows 系统下卸载软件频繁的下一步，甚至还会有错误引导的设计。
再比如，在一些产品里关注了某个人，但是有一天想取关的时候，总是找不到取关按钮。或者，一些产品里并不重要的信息，总是闪着红点引导用户去点击等等。
我们常常会去分析按钮的各种样式，比如是否有圆角，是否有投影，是否要渐变等等；也会去梳理按钮与文案的关系，比如按钮中的文案与边框的间距，文案的大小要适配载体的比例等等；甚至，还会去分析按钮的位置，比如取消按钮应该在左边还是右边，取消按钮与关闭按钮的区别等等。
但似乎，我们很少会去探讨按钮背后的这些事件，我们都知道按钮是用户与某个事物间接的交互控件，但我们从来都只注意于按钮的外形与按钮位置所应有的逻辑，而没有真正去探讨按钮所承载的这些问题。
比如用户点击了「会员办理」的按钮，会发生什么事情？我们是否应该在下个月用户扣款之前提醒他们？或者，频繁的在产品里滥用并不重要红点提示，会不会影响用户对于该产品的使用频率？
这才是我们需要延伸出来思考的事情，而不单单是按钮或者某个控件本身。我们思考的远不止目的，还有义务。
所以。
我并不觉得在产品界面上引导用户执行操作有什么问题，相反，问题在于在引导的同时，不能阻碍用户进行其他的操作，给予用户合理的控制权，才是最重要的。
产品设计的目的在于正向逻辑的用户操作体验，而产品设计的义务在于给予用户拒绝的权利。
文章来源：优设 作者：和出此严
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
的App类别是游戏，而健康&健身几乎没有进入前10。2020年虽是艰难的一年，但它提供了很多机会，可以为移动应用市场引入一种新的经济回报和有意义的医疗解决方案，直接影响人们的健康行为、并帮助他们生活得更轻松、更愉悦。
为此，你需要一个功能强大的App，因为如果不能运行的话他就是无用的产品。但是这种强大的功能还需要通过设计来将它呈现出来。一个优秀的医疗App设计将医药类App最重要的细节呈现出来，并引导用户使用，以及建议用户接下来如何操作，最终完成必要操作。
一个App能凭借自身成为一个的客户开发工具和公司的核心产品。对于与健康或医学相关的产品，UI/UX设计更为重要。
呼吸监测应用程序-作者: George Frigo
在这篇对设计师和公司都有帮助的文章中，我们将探讨一些医疗App设计中的最佳实践是如何发挥作用的。
医疗类应用类型
值得注意的是，“医疗保健App”是一个多方面的概念，包含了大量与健康和医学相关的数字产品。
这里有很多类型的医疗类App，包括：
医疗专业人员远程病人会诊的App（远程医疗）
电子病历App(EMR)
记录和管理患者生命体征的App
提醒患者服药、锻炼等的App
医疗计算App
提供医疗信息参考的App
健身和运动类App
健康的生活方式和健康App（每日饮水量、睡眠管理等）
这似乎是一个过于宽泛的主题（例如，将卡路里计数器app与医学教育解决方案相比较），但是也有一些通用设计经验可以使得医疗健康类App更、让人们有办法得到他们想要的。
医疗应用程序作者: Victor Nikitin
如何为医疗健康打造移动应用
即使一个App不是企业的主要产品，它也有可能产生巨大的价值。例如，如果它是一个医疗办公室的配套应用程序，它可以减轻员工的负担，为客户提供信息和服务。如果一个健康App是企业的主要产品，比如健身或冥想应用程序，那就比较危险了。有时候，健康App的缺陷是人们放弃使用这些App的原因。
为了避免这种情况，我们来看看医疗App设计中的一些最佳实践技巧，以及它们如何帮助App聚焦、直观和快速。
医疗保健: Anatoly
调研—成功的第一步
在设计原型应用程序界面之前，你需要知道谁是你的目标用户，以及他们的地理环境、社会经济背景和心理特征，毕竟没有产品可以迎合每个人。用户的兴趣和能力决定了他们如何与软件互动。所以解答以下问题将有所帮助：
谁是你的目标人群？
他们喜欢什么？
怎么样的app他们每天都会使用？
使用目的？
通常，医疗健康软件要么被患者使用，要么被医生使用（如果我们将生活服务类软件的用户也计作患者的话）。这两种用户的需求在功能和UI设计上都有不同。因此，医务人员通常需要快速获得某些数据项：EHR/EMR（电子健康档案/电子病历），药品规格标准，诊断和治疗建议，参考资料等。然而患者需要的是尽可能精简的、易于理解的信息项。因为这一群体中有相当一部分老年人或者有某种特殊障碍。
只有进行了恰当的用户调研，得出了相应的结论，设计师才能继续医疗健康软件的真实有效的设计。
Chahua的健康管理软件
细化明晰每个案例
医学对普通人来讲是复杂的学科，最好的方法反而是将医疗健康设计得相对简单，以安抚用户并让他们保持专注。
“世人总将事物搞复杂，殊不知，简单才是至理。” ——Richard Branson
想要给人留下深刻印象，将医疗UI设计得过于详细是没有意义的，最好的是界面和逻辑易于理解，即使软件是专为医务人员设计的（当然，不要居高临下）。
医疗App/档案和活跃度-作者: Igor savalev
设计医疗健康软件的UI，提供有益的新用户引导流程，使界面可直观理解。否则，用户会对糟糕的体验失望，甚至等不到进入核心功能就会退出。
所有相关方，不管是医生还是患者，都会喜欢清晰极简的软件，这样，你就不需要让用户学习如何操作软件，这对医疗机构来讲是个解决办法，他们已经习惯了这些事。
帮助用户稳定发现功能，循序渐进地给予指导。以用户引导流程开始，将app中每个动作划分成可处理块，一次提供一个操作说明。
使用恰当的颜色（更进一步）
利用被动输入和自动补齐功能限制用户必须输入的信息的数量，调整键盘，动态验证字段值。这篇文章里还有更多表单设计相关。
所有医疗信息都得由拥有一定学历和专业知识的专家提供，否则，这些内容要么不完整，要么包含错误，这在医疗健康中是不容允许的。
医务人员使用的医疗软件-作者: yurig
功能的重要性（及特色）
医疗保健应用程序的特性和功能类型取决于它的用途和目标用户。例如，医疗中心的应用程序需要一个账户，病人可以在那里查看他们的就诊、推荐和预约记录。如果没有安全加密的视频会议和通信功能，远程医疗应用程序就毫无用处。
与其他一般APP不一样的地方，“首页”是医疗类的app的主要功能的位置。先来回答一个问题: 为什么有人使用您的应用程序(或类似的医疗类App) ，如果一个人访问一个应用程序来记录或接收一些信息，联系医生，检查他们的进展等，这个功能都放在“首页”上？
呼应前面的观点，就是避免过多功能同时出现时的混乱。不可否认，这种情况在传统的医疗类App中更为常见，这些应用程序有时候会分散注意力，不断添加新的和新的功能，直到只有资深的用户才能理解并熟练使用。
根据二八定律的法则告诉过你，80%的用户倾向于使用不超过20%的功能。区分优先次序，决定哪些功能对用户最重要。
医药应用App作者: Manoj Dalvadi
导航的研究和鉴赏
清晰的导航结构是医疗应用程序用户界面设计的骨干必需组件。没有它，这个App将会不再受欢迎。导航代表和易用，因此从用户的角度来看是有价值的。一个医疗专业人士需要一个能辅助工具，因为他们已经有太多的时间花在处理EHR（电子健康记录）上了，【类似国内的病历本】。
经斯坦福医学院进行的调查发现，医生花在每个病人身上的时间中，有62%的时间花在EHR（电子健康记录）上。如果设计的导航不够，那么这个App就没有任何使用价值。就算病人目前在使用导航的频率很低，但他们也不会乐意看到混乱的导航而放弃二次使用的机会。
重要的导航信息应放在屏幕上显眼的地方，并根据要求提供详细信息。有一个“三次点击规则”说系统的设计应该使任何信息都可以在三次转换中使用。如果用户在三次点击之后找不到他们想要的东西，他们可能会感到沮丧，放弃他们原本要做的任务。
目前采用标准的应用程序导航有：
-汉堡菜单
-标签栏
-导航抽屉
医疗应用-作者: Alex Samofalov
色彩的运用方法
一般来说，应用程序的颜色选择取决于目标用户和应用程序的主题来决定。
医疗保健应用程序的设计通常是在中性色调与流行的冷色调的蓝色和绿色，白色为背景。在大多数情况下，设计师这样做是为了达到某些效果: 利用舒缓柔和的颜色与医疗保健行业的共同联系，缓解焦虑，增加可信度。所以你很少能看到明亮的红色或黄色在医疗类App的界面。
蓝色为主的医疗类App，作者Adam Sokoowski
然而，考虑到医疗软件的通用性，在颜色的选择方面没有特别的限制。要考虑到的是，应用程序的整体外观应该创造一个积极的印象，而不是引起担忧，恐惧，或其他不良情绪的感觉。
例如，下面这个健身应用程序的深色调的设计看起来很漂亮，也不过时：
深色为主的医疗类App
健康与锻炼应用程序-作者: Saepul Rohman
或者用明亮的颜色来增加一些活力：
移动健身应用-作者: Michal Parulski
追求个性
移动App的个性化设计是近年来最显著的设计趋势之一。某些功能需要适应特定的用户模式。
这样设计的目标是帮助用户更地利用App解决他们的问题。这个系统提示了一个人接下来要指示的操作，否则这些可能会被忽略。要做到这一点，必须识别和分析用户特征，并通过数据跟踪用户的行为变化。就像每个人都有自己不同的身体状态一样，他们也希望自己使用的App能根据他们的身体状态提供相应的差异化体验。即使不是医疗保健行业，也有33% 的客户会因为个性化不足而放弃某款产品。
在医疗App设计中，个性化定制选项有很多: 颜色主题、通知、交互元素、使用 AI 创建个性化推荐等等。
最大化可访问性设计
易访问性设计对于每个App设计都很重要，特别是医疗App。
医疗App的用户通常有不同程度的视力和听力，年龄，身体和心理障碍。医疗App的功能设计需要让不同的用户在使用过程中都有比较好的用户体验。考虑不同用户的局限性，并帮助他们努力克服局限性带来的负面影响非常重要。例如，晕动病患者不太喜欢过多动效。
这并不意味着在医疗App设计中只能有两种颜色，所有的字号都必须非常大，但这确实意味对于医疗App，设计师会面临更多挑战。不过这是一个额外锻炼机会，而不是负担。从WC3的网页内容无障碍指南开始，使用像这样的色盲模拟器。
App无障碍设计的例子: 把主要元素放在拇指区，不要忘记选择改变视图为水平模式，字号需要更大，等等。
色盲模拟器-作者: keithar
积极态度的力量
医学不仅复杂，而且通常让人望而生畏。比较聪明的设计手法是让你的应用看起来和医学毫无关系。这样可以消除人们对医学压力的刻板印象，让用户体验更加愉悦。
比如在用户使用的不同阶段运用积极的文案、有趣的图片、舒缓的颜色或其他元素。医疗App界面设计中的图片和图标需要能够用户调动积极、愉快的情绪，营造一种无痛感和安全感。
冠状病毒APP-作者: Mahdieh Khalili
不要将App设计成网页
在有医疗网站的情况下设计医疗App，老板甚至是设计师可能会将网页页面复制到App当中，这样通常会导致用户放弃使用App。
移动端和网页端的交互存在一定的差异性。手机的物理尺寸比电脑屏幕小。在手机上，我们的任何交互都是通过手指来完成，所以不愿意输入冗长的文案，同时期望产品运行得更快。
在大多数情况下，人们使用网站获取信息，使用App完成工作。此外，App集成了手机的功能，比如加速器和摄像头，使App的设计不同于网页。
健康医疗应用-作者: Grace Saraswati
适得其反
保持吸引力与功能平衡都很重要。医疗保健应用程序必须不能分散用户对其内容的注意力。仔细看看上面的要点，注意好分寸就行。
图形元素、包括动效，应该始终履行他们的使命，即数据输入，并说明微交互的用户与系统，而不是仅仅只为了使一个应用程序看起来很炫酷。
不要过度使用渐变和阴影，只将用户的注意力集中在主要文字信息上。只使用一种字体，你可以通过改变字体的大小和其他特征来改变它，比如斜体、粗体。
多使用简单的配色可以获得更清晰的品牌信息和导航。
健康与活动跟踪互动-作者: Dibbendo Pranto
抄还是不抄？
你可能会在某个时候想，如果觉得抄这个方案有用的话？是不是应该拿一些成功的竞争对手的应用程序复制一份。
其实，照抄其他产品是不明智的行为，因为他们的设计可能很容易就不够好。你最终可能正好抄了竞争对手的错误方案，从而阻碍未来应用程序市场运作。
另一方面，你肯定应该对其他应用程序进行分析，进行竞争对手的研究。一个应用程序应该与用户以前使用其他应用程序的经验相关。如果事实并非如此，而且你添加了太多的原创性，那么使用这个应用程序的用户就会觉得很麻烦，用户也不会容忍“一切都错了”的设计。苹果和谷歌都有人机界面指南和材质设计。
用户把大部分时间花在其他事情上 ——Jacob’s Law
有必要根据你的品牌、服务和产品的具体情况进行设计。好比如一个健身APP与一医疗APP，两者使用方向有很大的差异。所以说必须完全符合目标受众的要求、细节，以及应用程序的主题情况进行针对性设计。
药物提醒程序-作者: Martyna Zielińska
实用性测试
最后，要记住最重要的一点，每个设计师都可以认为这个决定是否合理。他们可能会对应用程序的架构和导航的一致性，深思熟虑的设计，以及最重要的实用价值深信不疑，以至于完全忘记了通过实践进行测试，设计师可以提高他们的同理心水平，更好地感受客户的需求。但事实上，这种陷阱会给应用程序带来很多负面影响。
只有在分析了与用户与应用程序界面交互相关的数据之后，才能得出结论。多进行一些测试将有助于及时地获得反馈，解决应用程序中的所有可出现陷阱一样的场景。
积极的用户参与是成功的关键。在年龄、职业、地理位置、性别、文化和宗教背景等方面，选择尽可能接近目标受众的相关测试对象。越接近越好。让他们执行你的应用程序的主要功能并收集反馈。
病历本App应用-作者: Alex Samofalov
最后
设计不单单是讨论颜色搭配和字体的运用，而是能够带来价值和解决业务问题。健康和医疗类App是一个敏感而富有挑战性的课题，需要特别关注。设计师们一直在努力平衡医疗应用程序极高的安全性和可用性要求与其界面的美学性，经过深思熟虑体验和用户界面设计成就一个很好的医疗类工具，让用户在一个简单和直观的界面的帮助下参与使用。
文章来源：花火圆桌（ID：huahuoyuanzhuo） 作者：Kate Shokurova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
APP UI设计一直在变化，就像网页设计一样，不停的创作新鲜、友好的产品，设计师要跟上这个趋势，最好的方式就是多看优秀案例，下面大家一起来看看今天的精选，建议访问官网查看更详细的展示哦！
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
精美的天气app赏析
--手机appUI设计--
--精美的天气app设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
每年的双11在设计师们的眼里，都不仅仅是购物狂欢节还是一场视觉盛宴。这不，今年的双11重头戏来了。
天猫联合各品牌发布了超级符合“猫头海报”，一共55家下面让我们一次看个够。
1. 泡泡玛特，很有意思的创意
2. The North Face场景感十足
3. 好奇很温馨的设计
4. 外星人，一直都想买的电脑
5. VANS，我喜欢他家的黑格子鞋
6. Levi’s，我服了
7. 麦当劳，烟雾的创意很契合产品
8. 惠氏铂臻3，一团线织出来的创意
9. 拉面说，来碗面
10. 宜家家居，仔细看，是购物袋
11. 巴黎欧莱雅，万能的C4D
12. 朗仕，细节很多
13. 华为，冷暖对比很有冲击力
14. 乐高，积木的海洋
15. Marshall，燥起来
16. Jordan，乔丹
17. 肯德基，WOW好吃！
18. 林氏木业，俯视的构图角度，空间感很强
19. 元气森林，故事性很强
20. 强生，满是爱
21. fresh，高端的护肤品牌
22. 万代，为“酷”而生
23. 始祖鸟，化石来了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起冲浪
26. 施华洛世奇，每个女孩都值得拥有
27. PINKO，乱的有创意
28. MINI，我有个进MINI车友群的梦
29. 孩之宝变形金刚，汽车人变形
30. Onisuka Tiger，日本的运动产品品牌
31. 优衣库，线下实体店的货架创意
32. 三顿半
33. OLAY
34. Dyson，很亲切的表达方式
35. 迪士尼商店，可爱、好玩
36. NIKE
37. 法国娇兰，看起来很贵气
38. 荣耀
39. LINE FRIENDS
40. M.A.C
41. 红星美凯龙，空间感很强
42. NET-A-PORTER，泡泡龙的感觉
43. 稀奇，太喜感了
44. 百威，哟哟切克闹
45. 芭比
46. 李子柒，依然还是熟悉的味道
47. 爱他美3，阳光帅气
48. 花西子，雕刻工艺品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，传统国风的感觉
52. Moleskine
53. 大疆，很喜欢无人机，有一起拼单的吗？
54. 绘儿乐，这个创意现实中我玩过
55. 乐事，好吃
每个品牌对于猫头的创意表达都不一样，很多都是生活中随处能见到的，但在设计师的眼中，就是创意灵感来源。
下面还有视频版，大家一起看看：
以下视频来源于
看完今年的猫头海报，让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
还有精美的天气app赏析
--手机appUI设计--
--精美的天气app设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
“我们不设计页面，我们设计构成元素的系统。”——Stephen Hay
原子设计理论并不是什么高大上的规则。
随着网页设计的持续发展，我们认识到开发设计系统（design system）的重要性，它最早就是为了让网页设计师更容易理解网页的构成，后来才延伸到UI设计当中。
简单来说，当公司的业务产品逐渐扩大时，我们需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。 开始设计系统的制定时，大部分设计师可能都会先去网上找到大厂现成的设计系统，当拿到他们的成品的时候，会把自己的产品进行拆解和借鉴，这的确能快速解决问题，但是如果不理解其中的组织规则和逻辑，只是借鉴他们现成的设计系统，只能了解个大概，知其然而不知其所以然。因此，原子设计理论的出现就是为了帮助我们去搭建设计系统，这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。
原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质，并且它们一旦被分解就会失去其意义。
分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质，并且相较于原子来说，更具实际意义和可操作性。
有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。
宇宙中的物质都可以被分解成为原子元素。
碰巧的是，我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。
△Josh Duck的“HTML元素周期表”
接下来和大家细聊一下什么是原子设计；原子设计到底好在哪里；为什么要有设计系统；以及该如何利用原子理论创建自己的项目组件库。
原子设计（Atomic Design）理念最早是由国外网页设计师Brad Frost提出的，他从化学元素周期表中得到启发，发现原子结合在一起，可以形成分子，进一步形成组织，从科学的角度来讲，在宇宙中的所有事物都是由一组有序的原子组成。
Brad将这个概念应用到界面设计中，仔细观察后我们不难发现，界面其实就是由一些基本的元素组成，文字，颜色和图标等都是一个个原子。
通过原子设计，我们可以把界面看作是一个连贯的整体，同时也是一些元素的集合，每个元素都不尽相同，互相结合产生更多层次和结构，模块之间相互统一。说到底，原子设计其实是一种设计方法论，它由原子、分子、组织、模块和页面共同协作，由此创作出统一和富有层次的设计系统。
简单来说：原子结合在一起，形成分子，进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素。
原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。
它的五个不同阶段是：
原子(Atoms)：为页面构成的基本元素，例如标签、输入框、文字、颜色等；
分子(Molecules)：由原子构成的简单UI元素，例如按钮；
组织(Organisms)：相对分子而言，较为复杂的构成物，由原子及分子所组成；
模板(Templates)：以页面为基础的架构，将以上元素进行排版；
页面(Pages)：将实际内容（图片、文章等）放置在特定模板内；
原子设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个阶段哦～
原子
如果原子是物质的基础组成部分，那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。
在团队开始新项目时，为了保证各个页面具有统一的设计风格，我们会制定一套简易的视觉规范，在关键的设计元素上，各个设计师达成一致，这样就能很大程度保证不同页面的风格统一，并在这个基础上去探索更有创新意义的设计方案。
在模式库中，原子一目了然地展示了所有的基本样式，当你回来继续开发和维护你的设计系统时，这是一份很有用的设计参考指南。
分子
分子是原子组合建立的元素，两个原子即可组成一个分子。
在界面中，分子就像是一个由UI元素组成的相对简单的组织。例如，搜索框里的文字和图标共同打造一了个搜索表单分子。
以按钮为例，它的组成元素包含了文字、色块、图标和栅格。合并后，这些抽象的原子从毫无关联到又一个共同的目的，图标和文字互相配合传达意义，颜色定义了按钮的特性，栅格为按钮定义了一个尺寸和规范。
将单个元素组装为简单的功能组是我们一直以来构建用户界面的方式，可帮助UI设计人员和开发人员坚持单一职责原则，这种方式简单且复用性高，可以保证界面具有良好的可用性。
以界面设计中的表单为例，表单是一个非常常见的设计元素，一个表单分子是由文字、图标和线条原子组成。这些原子合并后，得到的是一个可以应用在任何信息展示或者功能入口的组合。
组织
组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。
通过结合分子和原子，我们可以构建更复杂和可扩展性的模块，这个称之为组织，其实也可以称之为组件，这些组件组成了界面的不同部分。同样以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。从建立分子到建立更精细的组件，这为设计师和开发人员提供了重要的内容构建思路。
组件在解放设计师生产力方面有着重要的作用，我们可以把界面中常见的组件进行分类整理，如搜索、表单、图片和卡片等，这些常用组件基本能满足日常的设计需求。以Aribnb为例，他们主要分为3类：卡片、表单和内容。每个标签内容的设计形式尽量都保持统一，因此负责不同内容模块的设计师只要选择同一个组件就能完成页面的设计。在短时间内就可以完成页面超多的复杂项目，极大的提升了团队的设计效率。
在网页端最典型的例子就是网站导航，搜索表单，我们几乎访问的每个网站都会看到这些类型的组件。
模板
原子，分子和组织的这种语言有助于我们有意识地构造设计系统的组件。但是，最终我们必须采用一个更适合描述我们最终产出的语言，这样才好汇报给老板、客户和同事，简单来说就是说人话。
模版的本质就是线框图，在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案，找到一个相对合适的方案。模版的意义就在于可以专注于页面的内容结构布局，而不是页面的最终内容，此时模版内容是随时可以调整的，尝试不同的方案，在多个模版中进行对比，在这个阶段改动和沟通保证了成本。因此，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。
模板是页面级别的对象，它将组件放置在布局中，并显示设计的底层内容结构。在设计一个有效的设计系统时，必须在布局的环境中展示组件的外观和功能，以证明这些部件组成了一个功能良好的整体。
模板的另一个重要特征是它们专注于页面的底层内容结构，而不是页面的最终内容。设计系统必须考虑内容的动态性质，因此，把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。
页面
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，将占位符替换为有代表性的真是内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。
页面阶段是原子设计中最具体的阶段，由于一些众所周知的原因这个阶段非常重要。别忘了，这可是用户在访问你的界面时会实际看到和交互的内容。
除了演示用户所看到的最终界面之外， 页面对于测试底层设计系统的有效性是必不可少的 。在页面阶段，我们可以看到当将真实内容应用于设计系统时，所有这些模式如何运作。所有的一切看起来都很棒吗？如果答案是否定的，那么我们可以回过头去修改我们的分子、生物体和模板，以更好地满足我们内容的需求。
页面还提供了一个表达模板变量的地方，这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子：
用户在其购物车中有一个商品，另一个用户在其购物车中有十个商品。
网页APP的仪表板通常显示最近的活动，但是该部分对于首次使用的用户是禁用的。
一篇文章标题可能是40个字符长，而另一篇文章标题可能是100个字符长
在所有这些例子中，底层的模板是相同的，但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子，有机体和模板的构建方式。因此，创建解释这些变量的页面有助于我们建立更具弹性的设计系统。
这就是原子设计！这五个不同的阶段同时协同工作，以产生有效的用户界面设计系统。
原子是最基础的UI元素，并且是可以用作界面的元素构建块；
分子是用于形成相对简单的UI组件的原子集合；
组织是形成界面各个部分的相对复杂的部件；
模板将组件放置在布局中，并演示设计的底层内容结构；
页面将真实内容应用于模板，设计出视觉稿，并最终成为开发落地的依据；
原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤，能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来，因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。
通过模块化的设计系统调动组件，可以使我们开发新的产品时，从开始就可以对产品进行严格的把控与一定程度上的控制，进而规避了事后风险。开发之前不确定好系统模块化，毫无逻辑的去开发，开发到一半发现功能与需求对不上等问题逐渐产生，会导致产品的延期、人员成本的浪费、资金成本的增加，产品的迭代率的下降、进而影响市场先机与市场占有率。
原子化设计与原来的样式库设计思路不一样，原子化设计从抽象到具象，从元素到组件，让设计师从底层开始思考，对整个设计会有更清晰的理解。同时也能让设计更加统一，在新增组件的时候更谨慎。
原子设计的原理可以保证任何一个设计组件的构成与开发构建组件一一对应。同时应用原子设计的设计软件（e.g., Sketch, Figma)可以给新设计师足够的自由满足需求变通，并且可以保证同一个设计组件的更新会覆盖到任何一个使用这个组件的设计中。
原子设计为我们提供了一些关键的见解，帮助我们创建更有效、更深思熟虑的UI设计系统。
那么、
如果产品规模小只需要1，2个设计师，大概率是前期不需要大费周章搞一个需要开发配合的设计系统。可以只利用Sketch或者Figma做一个像贴纸一样的设计组件库。但是功能多了怎么办，公司来新人了，当新设计师产出后就会发现与原设计师设计的风格不一样，慢慢发现整体设计风格不统一了，只靠一个简单的组件库很难能满足新功能需求，新功能贴纸上没有设计或者设计需要变通，又或者是新设计师忙着交工忘记检查自己新组件和已有组件的异同。
这时候就会需要一个设计师领头去重新整理设计系统，走查发现同一个正文所用的十几个不同字号，又或者是十几个透明度不同的灰黑色字体，所有组件跟现有上线产品对比整理好后一并交给开发，开发再一一整理代码库。
设计系统（Design Systems）对于很多年轻设计师可能十个新名词，但是设计规范和组件等我们应该还是有一定认知的。在设计的过程中，我们会被其影响。在我们日常所使用的App产品中，如Apple、Google、Airbnb、Uber、滴滴等，他们的产品体验非常流畅，用户使用产品时能够地满足需求，在其良好的体验背后都有着一套强大的设计系统做支撑。
为什么需要设计系统
1、团队协作，体验一致。以滴滴为例，虽然只是一个简单的打车应用，但是其旗下的业务却很多，快出、出租车、顺风车等，每个业务都由不同的团队和设计师负责。可以想象如果没有设计系统，任由各模块设计师自由发挥，风格各异，出来的结果可想而知。而有了设计系统的帮助，就会感觉界面风格非常统一，感觉是出自同一个设计师之手，可见其设计系统的功劳不小。
2、系统的管理多样性。在设计过程中，我们会发现过程中，我们会发现每个业务的形态都是基于不同的场景，因为场景的多样性，在表现上就会催生出不同的样式。如果每个业务都用一种样式表达，久而久之当业务增长过快时，我们现有的设计模式就会难以满足。Airbnb的设计方式就是非常值得参考的一个案例，从最开始是提供民宿，到后来新增的餐馆服务，你会发现房源和餐馆都用了同一套图文信息结构，只是在内容的细节上有一些不同。这样可以降低设计的难度。设计师不用为每个场景思考一个设计模式而烦恼。同时，用户在浏览不同场景的内同时，在相互切换中也不会产生为违和感，一切都是很自然的操作。
3、帮助产品成长，避免一次性设计。互联网产品的成长模式是一种渐进式迭代，在产品初期的主要诉求是快速上线，等到产品上线获取一定的用户，证明它可以活下去时再逐步完善，增加更多的功能。每一次的迭代都是站在我们之前的思考之上，每一次的优化都会让我们的设计更进一步，这是我们期望达到的结果。
以Uber为例，新版本继承了黑色按钮的设计，并和地图进行了结合，地图的配色和旧版本相比也变得生动了，这种改变并不是一蹴而就，而是建立在原有版本之上。
一致性（Consistency）：由于分解界面成单一元素，不论在哪一个页面，UI元素的互动性是相同的，例如颜色变化、字体的排序、以及反馈。不但让使用者体验相同，在视觉上更为和谐。
效率（Efficiency）：由于建立了组件库，一旦要更改某一个元素，可以马上施行、应用。
跨部门的共通语言（Collaboration）：不仅方便设计师思考页面的和谐性，也可以让工程师、测试检验清楚页面的逻辑架构及变化，减少不必要的来回沟通
在此，顺便浅谈下设计系统。
通常，设计系统包含的内容由设计原则、设计语言和组件库，这是一个整体的概念。
设计原则
设计原则是一个产品的核心设计理念，设计的本质就是解决问题，在制定设计原则时要建立在这个中心思想之上。这些问题也许是一个业务形态，例如打车的场景，也许是一个设计形式，如表单。设计形式又很多，我们应该如何选择呢？相对合理的方法就是建立一个规则，所有的问题和形式都想这个规则靠拢，减少不确定性，这就是设计原则的出发点。因此我们可以理解为，设计原则就是一系列的规则，是我们设计过程中要遵循的中心思想。
例如：苹果把审美作为第一要素存在于设计原则中，它的产品往往也是品味的代名词，看看它的设计原则就知道了：
审美的完整性
一致性
直接操作
即使的反馈
隐喻
用户可控
△ 官网：https://developer.apple.com/design/
再来看看Material Design，Google对其定义是一个完整统一的系统，结合了理论、资源和工具的数字体验产品，相比而言它的设计原则就是更加独特，这是它的设计原则：
材料是一种隐喻
大胆/图形/强调/
运动赋予意义
灵活的基础
跨平台
△ 官网：https://material.io/design
由此可以看出，和iOS相比，Material Design的设计原则更加的抽象，因为他拥有一个独特的设计世界观，用还原的方法和物理方法呈现出它的本质，通过抽象的视觉卡片传递出设计的目的和原则。
设计语言
在建立设计原则后，下一步就是制定一套设计语言规范，设计规范是设计系统的表现层，面向的对象是团队设计师和开发者，他能帮助设计师的设计输出保持风格统一。同样也能帮助开发者高度还原设计。非常有利于设计师和开发者的协作。这套规范包含的有：字体、颜色、图标和栅格。
组件化设计
组件化设计主要作用有两点，一是保证多人协作效率，组件化设计可以快速完成一个简单页面的设计，提升设计效率；二是保持产品体验的统一性。同时，组件化设计环节在设计系统中是一个相对重要的工作，需要有一个全局观，要有较强的设计水平和沟通协作能力，这样，组件化的落地才会得到很好的推进。
在多屏时代，我们时时刻刻都在设计产品界面，需适配多系统，其中很重要的一点是如何在多系统之间保持体验一致性，很多人想到的就是规范，要想做一套严谨逻辑好，灵活的设计规范，那么原子设计可以帮助我们来很好的实现它，它在构建设计系统中算是比较科学的一种方法，国外很多设计团队都在使用这样的设计方法。比如以下这几个团队：
1、Airbnb
Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统， 这是为Airbnb的设计系统而设计的，其实就是个实时更新的代码数据库，可以实时查询sketch数据、代码，也可以下载图标、设计模块，所有工程师、设计师都可以免费下载。
△ 官网：https://airbnb.design/events/when-we-use-systems/
2、Frames
Frames 使用了精致的组件和先进技术，并结合 Sketch 构建了强大的 Web 设计系统，同样能满足修改原子，全局同步更新的功能，支持响应式布局。提供了近百个网页模板，可以非常迅速地完成效果图制作。
△ 官网：http://framesforsketch.com
3、Nested Symbols
这是一套免费的设计系统，它将按钮、输入框、下拉菜单、通知等控件，都制作成了嵌套符号，方便自定义和编辑。
△ 官网：https://www.janlosert.com/
原子设计理论最大的价值，就是为设计体系/组件库的构建提供思路和方法，如果你不满足于市场上现有的设计系统，我们还可以自己创建。因此我们首先要为产品设计出一个独特的视觉语言作为起点。这个视觉语言一定要有力度、易于扩展，必须能在所有地方奏效！
接下来就以 Sketch Library 功能来实现组件库的创建。
第一步：定义颜色（color）
将颜色添加 Main、Text、Status 等一级分类，例如：Color/Status；再添加二级分类，例如：Color/Status/Success 等，命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后，将每个颜色转换成 Symbol，便可统一调用。
第二步：定义字体（font）
根据设计规范，将不同字号的文字样式罗列出来，例如：Title 1、Body、Body2 等，按照「样式名称/颜色/对齐方式」的层级结构，将文字赋予 Text Style，整理出所有的字体样式。
第三步：定义图标（icon）
将图标放置在 24*24px 大小画板内，从定义好的颜色系统中选择合适的 Symbol，这样替换图标颜色时直接选定义好的颜色就可以了。在属性面板中锁定尺寸（size）大小，并把调整尺寸（Resizing） 设为上下左右同时吸附，以确保图标在使用时可以等比缩放。
第四步：加入其他元素（Elements）
根据以上对原子的定义和命名方式，依次完成对其他原子、分子和组织的定义，例如：按钮、表单、空状态等，整个过程都是通过 Symbol 的不断嵌套，最终实现组件库的创建。
第五步：加入组件库
使用快捷键「cmd+, 」打开 Preferences 面板，选择「Libraries」（组件库）标签，点击「Add Library」（添加组件库）按钮添加刚才的 Sketch 文件，完成后就可以从其他的 Sketch 文件中，对此库里的元素进行调用了。
写在最后，原子设计是一套具有科学严谨的创建设计系统的方法论，是一个构建UI系统的心理模型。
原子设计使我们可以将我们的界面UI细分为原子元素，并通过这些元素组合在一起形成最终的界面。
原子作为整个理论最基础的元素，当我们改变其中的原子时，整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙，当我们改变其中一个元素时，其他所有包含这个元素的页面都会发生变化，可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理，这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。
经常有同学问ios设计规范，安卓设计规范在哪看这类问题，最后，来推荐一些大平台的设计网站，上文出现过的下面就不重复了。我们耳熟能详的优秀设计都是来自于这些世界互联网公司，说真的，审美这东西还真是人家说了算～
反正看看又不要钱，都去康康呗～
Google Design
谷歌设计中心，它非常全面的展示了谷歌的设计工作和概念。包括Material Design在内的所有关于设计、体验、产品等互联网领域的探索。
△ 网址：https://design.google/
Fluent Design
微软基于Windows10的设计语言，包括人机界面布局、控件、样式及资源下载。
△ 网址：https://www.microsoft.com/design/fluent/#/
IBM Design Language
IBM设计语言是伟大设计的代名词，他将人们的需求转化成精心打造的产品。在这里可以学习IBM设计团队一用户为中心设计的新思维方式。
△ 网址：https://www.ibm.com/design/
Facebook Design
脸书设计官网，在国内，我们常常看到脸书的设计文章被翻成中文为中国设计师所学习
△ 网址：https://facebook.design/
Uber Design
作为全球第一家即时打车应用，优步其超前的设计理念和优秀的用户体验成为同类产品竞相模仿的对象。
△ 网址：https://www.uber.deign.com/
Ant Design
蚂蚁金服设计平台是阿里旗下子公司，基于蚂蚁金服生态系统的跨设计与开发的体验解决方案。
△ 网址：https://design.alipay.com/
参考资料
《原子设计》官网
Airbnb 设计规范
Apple 设计规范
Material Design设计规范
Google及其他
文章来源：tob.design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
组件化设计思维，能够提升设计团队的生产力，让设计师专注于设计上的创意，同时让设计师完成更多产品需求和提升团队的沟通效率
写在前面
组件化设计的流程，经过实际工作的锻炼和思考，具体可以拆分为 3 个方面：
1. 明确组件化设计的内容。
2. 场景设计走查。
3. 组件化设计验证效果。
一. 组件化设计的案例（界面展示篇）
小结：
组件化设计，需要设计师要有一个整体性的设计思维，要有很强的设计能力和良好的沟通协作能力，同时设计师要深入理解业务，这样组件化设计才能很好的在团队内落地推行。
组件化设计的优点有很多，能够提升设计师的输出效率，让设计师更专注于设计上的创意思考，提升沟通效率。
二. 原子设计方法论
原子设计方法论是由国外设计师 Brad Frost 提出的，他从化学元素周期表中得到启发，发现原子结合在一起，可以形成分子，然后形成组织。
Brad 把原子设计的方法论应用到界面设计中，用心观察会发现，界面是由一些基本的元素组成，颜色、文字、图标等都是一个个原子。
原子设计方法论，是由原子、分子、组织、模版和页面共同协作，可以帮助我们创造出一套符合公司产品的设计系统。
原子设计方法论是为了帮助我们去建立设计系统，目前逐渐被国内外的一些大公司，应用于创建统一的公司产品设计系统。
接下来，我们以金融产品为例 ，对原子设计方法论进行拆解，深入思考原子、分子、组件、模块和页面在界面设计中的定义是什么，以及对应的元素是什么，元素之间又是如何组合的。
原子
用户界面设计中的原子，是构成界面的基本元素。是一个单独的元素，如图标、标题、色彩等以及原子之间组合形成的新的元素组合。
我们开展一个项目时，为了保证各个页面保持统一的设计风格，我们会制定一套视觉规范，定义的内容包括：字体、颜色、栅格和图标，这些就是界面中最基础的原子。在关键的设计元素上，保证各个设计师达成一致，这样就能很大程度的保证不同页面的设计风格统一，并在这个基础上去探索更有价值和创意的设计方案。
分子
两个原子即可组成一个分子，以按钮为例：包含了文字、色块、栅格。
文字传达含义，颜色定义了按钮的特性，栅格为按钮定义了一个尺寸和规范。
把单独的元素做一个简单的组合，是我们做界面设计的一种方法，组合的方式简单且可复用性很好，作为开发者可以根据规则进行编写代码，提升产品的迭代效率和产品的一致性。
界面设计中的表单为例，表单是一个非常常见的设计元素，一个表单分子由分割线、文案、Icon和分割线等原子组成。原子组合之后，可以得到是一个可以应用在功能模块的组合。
组织
我们把分子和原子做组合，就可以创建复杂的、可扩展性的模块，然后变成一个组织。
组件在提升设计师设计效率方面有着很重要的意义，设计师可以把界面中常用的组件模块进行分类整理，比如：图片、卡片、输入框等，可以解决设计师日常的设计需求。
以金融产品为例，基本分为 3 类 ：内容、表单、卡片化的设计。
每个卡片化的内容设计尽量保持统一性，这样方便负责不同模块内容的设计师复用同一个组件，就可以完成不同页面的设计，提升项目的设计效率。
模板
模版一般应用在设计系统的交互阶段，保证原型阶段的多方案的展示；模版内容，后面可以优化，这样可以降低设计的成本。模版的价值可以让设计师，更专注于页面的结构化设计排版和对页面布局的思考。
那模版的原理是什么呢？
就是产品的原型图，就是组织和分子的组合，会先形成一个完整的页面框架，作为一个初步的设计方案，作为团队项目的前期沟通所用。
以教育和金融界面为例，如下图：
界面
界面设计是把占位符内容替换成产品设计需要的文案，在模板的组合上进行完善，会形成界面的设计方案。
界面设计是模板的具体的展示设计，是真实内容的设计方案。
通过图标和文字的组合，清晰的展示用户所需要的场景，加上内容，就会变成一套完整的界面设计方案。
如下图所示：
以金融产品的场景设计为例，有了实际的内容后，我们可以发现通过组合组件，就能很好的呈现界面内容。
如下图所示：
小结：
原子设计方法论为界面元素提供了应用规则和组织整理，原子设计方法论在建立设计系统、团队协作、产品迭代优化等方面，都有很好的价值和意义。
三. 组件化设计的流程 ？
设计规范和 Ui kit 是我们管理一个或多个App统一性和设计效率的工具，同时探索如何更有效的提升设计效率。像 滴滴等Ant Design 设计系统，他们的产品体验非常好，用户使用产品时能够有效的满足其需求，良好的用户体验背后都有着一套好的产品设计系统在运作。
如下图，国外的金融产品运用组件规范化后的界面设计展示 ：
系统性的组件化设计思维的好处是 ：
1. 产品设计迭代优化时，版本和版本之间的差异性就可以得到很好的解决。
2. 界面设计之间的设计风格和设计样式就会统一。
3. 界面设计的效率和质量会稳定输出。
在我们所经常使用的 App 产品中，如 苹果、Airbnb、自如、Ant Design 等，用户体验都非常好，用户使用产品时能够快速的解决需求，优质的用户体验背后都有着一套强大的专业设计系统所帮助。
思考：我们为什么需要组件化设计 ？
一. 统一产品设计体验
1. 以京东金融为例，在京东金融最近更新的版本中，我们看到财富界面和生活界面，同样的模块可以复用，对于复用性高的内容，应该提炼为通用组件，提高设计效率。
2. 如上图所示，对于会员专区或者热门活动是金融类产品中最为常见的产品形式，在京东金融的首页出现，布局往往是左右结构，或者上下结构；因为这类产品具有较强的引导属性，所以会把右侧的运营的插画设计相对突出，以吸引用户的注意力。会员专区的卡片化设计，具有较强的复用性，可以列为通用组件，这样就可以保证两个产品界面的卡片化的设计风格和样式上的一致性原则。
二. 提高团队协作效率
1. 面对相同的设计需求时，可直接调用相关组件，节省重复性的设计工作，提升沟通效率。
2. 借助组件化设计，可以快速开展工作，达到复用的价值。
3. 通过设计语言可以完成一个界面设计，在下面案例中，主要的元素由文字、栅格线、Icon 等组成界面结构，确定好排版布局和图标的设计风格后，完成产品的界面设计。
三. 降低开发成本
1. 在实际工作中，如果每次制作一个新页面都设计不同的组件，开发就要写新代码，增加开发时间成本。
2. 如果我们常用的模块作成组件库，开发遇到相同的组件时，可直接调用组件，复用相关代码，这样可以降低开发成本。
组件化设计流程，
经过实际工作的锻炼和思考，具体可以拆分为 3 个方面：
一. 明确组件化设计的内容
我们需要整体思考，明确可以复用的的内容、组件，以热销理财场景为例，金融产品都会需要用户进行选择理财产品，可定义为理财产品的卡片化设计组件，适合组件化设计的模块。产品已有组件的优化，设计师要具体分析，分析组件体验现状，发现问题然后针对性解决问题。
使用产品的场景设计、交互体验、设计风格三方面都要思考，推出更好的产品设计的解决方案。以京东金融的财富和首页的界面设计为例，应用的都是卡片化设计的理财模块。在开发新项目的时候，同样可以调用同一个理财产品的模块化组件，不仅能保证产品上体验的一致性，也能降低团队的设计成本。如下图所示：
二. 场景设计走查
1. 全面体验走查线上的移动端产品设计,对用户的交互行为链路有一个清晰的理解，思考当前线上的产品体验。
2. 线上产品功能的迭代一般业务方都会有一个周期性安排，因此在走查时要及时和业务方沟通，在这个基础上再进行组件化的方案设计。
设计师使用金融产品，在设计的时候要考虑到每一个环节。
我们先来看下京东金融的案例，这两个闪屏运营弹窗除了场景不一样以外，其他元素都是高度统一的，组件化设计的优势在于，只需要改变组件的部分元素就能适配各种场景。如下图所示：
三. 组件化设计验证效果（如下图）
组件化的设计方案完成对接开发上线后，我们需要从两个方面来验证组件优化后的效果：
1. 组件化设计是否可以满足各业务方的需求和场景化的设计。
2. 通过定性数据追踪功能是否能促进业务的关键的设计指标的提升，这些数据可以是转化率等数据指标，用户的反馈也是一个很好的辅助验证方法。
四 如何建立组件化设计系统 ？
每个团队的体量和业务诉求不一样，个性化的组件化设计系统包含有设计原则、设计语言和组件库，这是一个争议的概念。
建立设计系统的原因：
1. 建立设计系统，可以方便团队协作，保证体验上的一致性。
2. 设计过程中，发现每个业务的形态，以产品的不同场景为出发点，使用一套设计系统，会提升用户体验。
3. 帮助产品的迭代和优化，同时提升产品和用户的体验好感度。
1 设计原则（设计理念、品牌指导）
设计的本质是解决问题，制定设计原则时要建立在这个设计中心思想上。
苹果的设计系统：
把审美作为第一要素存在于设计原则中。
1. 创意审美的重要性。
2. 隐喻的价值。
3. 易用性原则。
4. 及时的反馈。
安卓的设计系统：
1. 跨平台的设计适配原则。
2. 材料的设计价值思考。
3. 图形、强调、大胆的设计语言。
4. 动效的服务设计价值。
2 设计语言（色彩、字体、栅格、图标）
色彩的视觉语言规范，我们需要定义产品的基础色板和中性色板，基本色板包含了产品的主题色和辅助色，生成每个颜色的亮色和暗色的衍生色。中性色板包含黑白灰，这类颜色在界面设计中使用，能让页面内容具有良好的层次关系，提升阅读的效率和用户体验。
字体规范是界面设计中的构成之一，用户通过文字来理解和达成目标，完整的字体系统能有效的提高用户的体验和理解效率。字体的规范定义需要从三个方面出发：字重、灰度色、字阶。
界面设计的排版布局一般使用的 8 栅格法，它能适配不同尺寸的屏幕分辨率，界面元素大小和间距都是8 倍数为基准。
图标设计，隐喻，保持图标之间一致的设计风格和表现形式。系统图标为例子：以1@x图为例子，常见的尺寸有： 16px、24px、32px、48px等。
3 阿里系团队，制作的 Kitchen 组件化设计系统 很好 ：（如下图）
五. Banner 组件化设计、B 端组件化设计等平面组件化设计的案例如下：
总结 ：
佐藤写过一本书［佐藤可士和的超整理术］，里面讲述了他自己是如何通过整理自己的思路、对话、工作室、随身物品等设计来让工作变得并且最终对自我更加深入的了解 。
生活和工作离不开“整理术”，优秀的设计应该要从“ 整理和总结 ”开始，比如：组件化的设计思维，可以看做是一种 “设计的整理术” 。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计 魏华写
在承担ui设计项目中，常常碰到一些客户不给设计师看己往的软件或本公司设计师设计但没有被客户认可的设计方案，怕限制设计师的思路。那究竟给设计师参考会不会限制设计师的思维呢？
实际上不会的，这是更多维度了解客户的思考和角度，排除己被尝试过的选项。
在进行一个ui 设计前，深度方面应该要了解业务，用户角色，环境生态，交互流程，关键功能，核心价值，用户体验的峰值点和难点在哪里…….总之了解的越深越好。
宽度方面，要看到竞品分析，行业趋势，国内外优秀案例欣赏，专业文章观点，应该是可以拓展设计师的思维。
设计最核心的目标应该在于解决问题，而不是单纯的让界面好看。
优秀的设计师要明确解决问题的目标，博采众长，独立思考，看众多的竞品是看众多的解题思路，多方位角度看问题。各产品资源，核心技术不同，取舍不同，理解信息架框，运营思路，用户特征，技术实现可能性，不会只照着您给的资料比猫画虎。
因此，我认为，放心的给设计师参考资料吧，互相的了解，沟通越多，越容易出好的作品。
这五张图是最近蓝蓝设计的稿件，展现从一个模糊的概念性需求到一个可视化概念性方案的设计过程。
在数字化时代，B 端产品的重要性日益凸显。而 B 端界面设计的高效布局，直接影响着用户的工作效率和体验。本文将分享一些 B 端界面设计的高效布局策略。 明确布局目标是高效布局的基础。B 端产品的用户通常有明确的任务需求，界面布局应围绕如何帮助用户快速完成任务展开。例如，项目管理工具的界面，要让用户能迅速找到项目进度查看、任务分配等功能入口。 合理的模块划分是关键。将界面划分为不同功能模块，使信息分类清晰。以客户关系管理系统为例，可以分为客户信息展示、沟通记录、业务机会等模块。各模块之间界限明确，避免信息混乱。同时，要根据用户操作频率和重要性安排模块位置，高频操作和核心功能模块放在显眼易操作区域。 清晰的信息层级至关重要。通过颜色、大小、留白等方式区分不同层级信息。重要的提示、关键数据用较大字号和醒目的颜色展示；次要信息则以较小字号和相对柔和的颜色呈现。利用留白分隔不同内容区域，避免页面过于拥挤，让用户能快速聚焦关键信息。 操作流程的优化也不容忽视。减少用户操作步骤，让流程简洁流畅。比如文件上传功能，一键点击即可选择文件并上传，避免繁琐的多次确认和跳转。同时，保持操作的一致性，在不同模块和页面，相同类型操作的方式和位置尽量统一，降低用户学习成本。 还要考虑不同设备的适配性。B 端用户可能在电脑、平板等不同设备上使用产品，界面布局要能自适应不同屏幕尺寸和分辨率，确保在各种设备上都能提供良好的用户体验。 B 端界面设计的高效布局策略，需要从明确目标、合理划分模块、构建清晰信息层级、优化操作流程以及考虑设备适配等多方面入手。只有这样，才能打造出高效、易用的 B 端界面，提升用户工作效率，为企业创造更大价值。在不断变化的数字化环境中，设计师要持续关注用户需求和技术发展，不断优化和创新 B 端界面布局，以适应新的挑战和机遇。
蓝蓝设计的小编 http://www.lanlanwork.com