手机网站
手机网站
当我们收到需求文档或原型设计草案时，我们可以通过结合我们之前对自己产品的分析和理解，同时完成与几个竞争产品的详细视觉比较，来率先建立产品页面的主要风格。在进行竞争分析时，我们可以很好地总结出当前行业中同类产品的设计趋势，但并没有完全应用或复制。在设计时，我们应该首先遵循易用的原则。
在分析设计趋势的过程中，许多文章介绍了渐变或明快、大胆的色彩应用案例然而，并非所有产品都适合渐变或夸张颜色的设计。例如:金融、新闻、教育等。对于这些类型的产品，过于丰富或复杂的配色很容易分散用户的注意力，并且不能让用户关注内容本身。对于电子商务或音乐产品，你可以用更动态的配色来突出气氛。
由乔治·弗里戈和心跳机构
在上述情况下，APP“订票”在左边。右边是APP，它显示了关于“聚会和俱乐部”的信息。产品属性的差异也直接导致配色的巨大差异。
订票产品-当人们订票时，他们的注意力集中在售票信息上，如时间和航班。因此，为了不分散用户的注意力，避免影响信息本身，产品选择蓝色、白色和黑色搭配层次清晰，不干扰内容，简洁明了，方便用户查看信息。
信息产品-右边的产品是关于“派对、俱乐部”的信息展示，所以我选择了一个更加夸张的渐变配色来渲染气氛信息量不大，所以添加了适当的元素进行装饰，整体搭配很和谐。
2。实验界面排版结构丰富大胆的排版结构能在第一时间吸引用户的目光，大大增强界面的整体设计感然而，这种设计有很大的局限性。如果页面中有太多的内容信息，或者如果页面没有正确排版，布局不正确，语言不同，那么很容易产生相反的效果，使页面过于杂乱而无法集中注意力。受手机屏幕空间有限的限制，在网络端应用比在应用端更好。
，但这种类似于杂志的排版风格并非完全不受欢迎当应用到H5页面或细节页面时，它是非常精彩的。扩展设计方法还包括:全屏背景图片、海报风格页面、卡片裁剪布局、悬挂效果等。
3。插图元素的应用fo、WALKUP、Live Well和KilaKila
现在越来越多的APP产品增加了插图设计元素适当的插图可以营造氛围，突出品牌价值，增加亲和力，增加用户粘性，使页面更有趣。它也可以在抽象概念的具体化中发挥作用。它能以更好、更多样化的方式讲述品牌故事和愿景，缩短产品和用户之间的距离。
插图元素可用于产品中的许多地方，包括:打开屏幕页面、加载页面、下拉刷新、横幅、图标、详细页面和一些指定页面等我们可以在设计和绘制插图的过程中统一规格:颜色、形状、装饰元素等。通过这种方式，它可以重复使用、快速修改并提高效率。
4。适当元素的应用平面概念的核心是去除多余的装饰效果、多余的透视、纹理、渐变和其他可以产生3D效果的元素。让“信息”本身再次凸显为核心，使信息显示更加简单、直接、无过度干扰，从而减少用户在使用产品时产生的认知障碍。
之后，出现了平面2.0设计风格，元素保留了轻纹理形式，如微投影和微梯度。以便丰富元素细节2.0的出现是为了升级过于扁平和单一的界面风格，这样页面风格就不会过于单调，避免了审美疲劳。
指的是APP的设计或更新和修改，所以我们不得不说平面这个词。现在不仅是谷歌的材料设计语言，苹果的设计语言也在iOS11之后增加了卡片和阴影等风格随着设计语言的变化和统一，平面风格将在一个合理的范围内得到丰富和发展，可以使用的形式也越来越多。
5。平面设计风格张诗钟·维诺和爱德华
平面概念的核心是去除多余的装饰效果、多余的视角、纹理、渐变和其他可以产生3D效果的元素，这样“信息”本身就可以再次突出显示为核心，信息可以更简单、直接、无过度干扰地显示，从而减少用户在使用产品时产生的认知障碍。
之后，出现了平面2.0设计风格，元素保留了轻纹理形式，如微投影和微梯度。以便丰富元素细节2.0的出现是为了升级过于扁平和单一的界面风格，这样页面风格就不会过于单调，避免了审美疲劳。
指的是APP的设计或更新和修改，所以我们不得不说平面这个词。现在不仅是谷歌的材料设计语言，苹果的设计语言也在iOS11之后增加了卡片和阴影等风格随着设计语言的变化和统一，平面风格将在一个合理的范围内得到丰富和发展，可以使用的形式也越来越多。
6。动态效果的合理使用动态效果设计越来越受到重视出色的动态效果可以与页面完美匹配可以使平面页面充满活力，增加产品的体验舒适度减少用户的等待时间和一些负面情绪，让用户可以眼前一亮。相反，过于复杂或精彩的动态效果往往不能取得很好的效果。它不仅会分散用户的注意力，干扰产品本身的内容，还会增加开发成本，增加产品的体积。
我整理和总结了当前的主流设计趋势，选择了几种更适合在APP上设计的形式之后，我们可以将它一个接一个地引入到我们的产品中去尝试，将形式提炼成风格，并结合产品属性进行设计演示。同时，对比竞争产品，分析其界面搭配的优缺点，优化我们自己的产品。
整理修订版1的要点。竞争分析，相互学习对方的长处分析市场中的成功案例与自己的产品属性相匹配，也可以收集替代的间接竞争对手；分析它的优势，提取和梳理它，并与自己产品的内容框架进行比较和优化。这样做的好处是避免闭门工作。学习其他平台的优势可以提高效率。然而，这并不意味着我们应该盲目复制。这样做的目的是提高自己，寻求突破。
以金融产品为例:实名认证、资本流入和流出、投资和财富管理、利息收入等。将参与到产品中那么产品的安全性必须是用户的第一要务。我们的页面应该设计得简洁而精致。我们应该想尽一切办法消除用户的疑虑，增加他们的信任。
蚂蚁金服、杜晓曼财务管理、赵联财务、京东财务
都是大型财务管理平台这些产品具有结构清晰、色彩鲜艳、细节控制良好、主要为纯色、平面设计等特点。
在优化和升级自己的产品时不能完全复制其他平台的设计；这样，它最终将成为替代产品的拼凑。我们需要分析这些案例中的设计点是否符合我们自己产品的特性。
如:
平台展示金融产品是否需要突出各种信息？你需要添加排水横幅吗？首页上显示的内容太多了，我们能不能去掉多余的装饰元素，以免混淆视觉主题？普通财务管理平台有必要加横幅吗？当内容不足时，是否需要添加图标2.建立掩埋场和收集数据数据支持在修订中起着非常重要的作用通过在主页的按钮或可点击区域等进行隐藏点处理，我们可以了解相关的重要数据。
例如，首页的横幅点击量很少，所以我们可以分析原因，或者如果没有用，我们可以直接删除横幅部分吗？点击主页按钮的次数非常少。我们将改变字段或位置，看看点击次数是否会增加。页面点击区域点击量高的原因是什么，以及在修改过程中是否需要保留？
，因此，从墓地获得的数据对我们的修订有很大帮助。此外，我们还可以通过官方微信微博和下载平台收集用户反馈，以强化数据。
3。可视化信息显示的合理性和一致性应用程序界面的布局比较规则，设计时应考虑大多数用户的使用习惯。上述杂志形式的排版在实际项目中很少出现；复杂的设计和高开发成本使得这种形式非常危险。
配色，许多金融产品主要是纯色，以免一些花哨的设计方法扰乱主要内容；尤其是对于金融等敏感产品当然，纯色不是绝对的，合理的渐变组合也能起到很好的效果。比如京东金融顶层渐变色卡的加工形式，我们应该根据实际情况来设计。
设计页面时，我们应该保持一致的原则，不要把每一页都做成不同的样式。间距、颜色匹配和插图也是如此。在设定规格和主要样式后，它们应该贯穿整个过程，不能在大范围内随意改变。
4。定位思维无论是在分析还是设计中，我们总是把产品看作生产者。产品推出后，用户在使用时可能会遇到各种意想不到的情况。虽然我们不能完全解决所有可能出现的问题，但在设计之前，我们应该“换位思考”，从用户的角度来看待我们的产品，尽可能分析所有不合理的地方，以便尽快解决。因此，在修订前充分收集客户的需求和经验非常重要。
同时，移情也可以在团队中实施我们可以和每个人分享我们的想法，集思广益。让团队的所有成员都参与进来，听取他们的意见。整理出更多有用的想法
5。刻意改变有时，为了追求速度和利润，许多产品设计会走捷径市场上有越来越多的同质产品
不仅存在于软件中，也存在于硬件中
主要手机制造商竞相模仿iPhone x(互联网图片)。
bang screen指的是由于追求极端的边界而直接在手机屏幕上采用的手机解决方案。它集成了前置摄像头和各种精密元件，可以说是全屏的折衷方案。垂直后方相机也是如此，由于头部空间的压缩，它从以前的水平相机变成了垂直相机。
和一些制造商前面没有那么多精密元件，但仍然使用刘海平；把后面的摄像机变成一个垂直的行此后，OPPO和vivo相继推出了真正的全屏手机。尽管在机身内部做了一些妥协，但我们在全屏设计中看到了突破和更多的可能性。
，因此，我们可以在设计页面时刻意寻找差异。虽然他们都追随平面设计的潮流，就像最近在网上广为流传的平面2.0和“全白”一样，但他们在平面设计的基础上不断进行新的尝试和创新。
全白
6。team test与我们在设计之初集思广益时一样，当页面的设计完成时，我们也可以让每个人一起参与搜索页面的逻辑和设计问题。
如果有足够的时间，我们可以使用Axure、Principle和其他工具制作一个交互式演示，供大家测试。这样，我们可以更直观地在整个页面中找到问题。
后整理当我们完成所有的设计和测试后，我们将开始准备与开发部门对接。在这个过程中，最重要的任务之一就是切割图纸并标记出来。
现在拥有越来越完善的技术。我们可以使用其他插件来快速完成标记工作。我通常用蓝色泻湖。我可以把完成的页面上传到蓝色泻湖。它将帮助我们自动完成贴标工作，无需任何其他操作。与之前的逐步标注值相比，导出图片的效率提高了无数倍。
199切割地图也是如此。在软件中标记要切割的部分，并上传给开发者下载。一些特殊的图片可能需要单独标记和剪切，大多数其他元素可以用软件剪切。这些插件大大提高了我们以后输出的速度，而且效果也很好，节省了我们很多时间。
当然，在所有工作完成之后，文件的排序和命名也是一个非常重要的内容我们应该在工作中养成一个好习惯。每一个文件都应该尽可能地被命名为坏的，并且文件夹应该被分类以便于我们随后的修改和总结。
的命名方法可以类似于切片名称(组件_类别_功能_状态)。如果页面太多，我们没有及时整理，会给我们以后的工作或工作交接带来很大的麻烦。
整理出了我认为修改时应该注意的要点。不同的公司将有不同的要求仅供参考。在下面的文章中没有提到动态效果。在下面的文章中，我将集中整理动态效果的内容。作者:FLYXMF，
这篇文章最初是由@FLYXMF发表的，每个人都是产品经理。未经作者许可，禁止转载。
地图来自Unsplash，基于CC0协议
