作者 | 赵小马

有一段时间没写文章了，今天整理了些关于网页创意的文章，分享给大家，希望对您有帮助。

前段时间一位360的设计负责人问过我一个问题：您是偏向于交互设计还是视觉设计？我：“我还是偏向视觉设计，在公众号发的一些文章都是交互设计的文章，因为交互设计是一个短板，所以一直在加强。”

那么，今天的案例研究分享了为客户提供多种服务的登录页面的交互流程和设计流程，同时也有很多设计技巧在里面，您一定要耐心读完！

项目

提供不同服务的代理机构的登陆页面。

过程

任务是为客户创建一个独特的，全新的服务愿景。该网站必须从类似的网站中脱颖而出，（很多客户都是这种要求）基于用户研究和市场探索，设计师决定使用颜色和形状来解决这个项目，并寻找一些其他技巧让他完美结合。

草绘和原型

当选择简单的结构时，工作就从UX原型开始。在这里，设计师设计了几个部分的结构，每个部分都致力于不用的提议。将每个部分作为新的页面，我们获得的体验是用户关注的焦点集中在该部分的信息上。

即使整体结构没有很多元素，但通过在纸上绘制草图还是很容易的。想法和即时手绘的连接可以带来新的表现和构图方式。当你在勾画你的第一个愿景时，你会想到这个新想法。因此，以传统的老式方式进行素描是打破创造力的最佳方式。 

在将自己想法画在纸上并构思后，根据任务的不同，无论是手绘草图还是数字线框，都可以向客户展示第一次探索，当完成原型后我们就会进入视觉部分。

 UI设计

接下来，我们开始UI设计，由于页面的第一部分只有公司名称，口号和箭头滚动，所以我们的想法是创造一个明亮而引人入胜的背景。设计师开始创建元素的抽象组合，并记住它可以进一步动画。

第一个变体是矩形和方形等严格的数字，但后来她提出了圆形看起来更友好的想法。因此，它们象征着用户受邀发现的想象场景背后的奥秘。

颜色的选择始终是设计过程中最有趣的部分之一。设计师在脑海中保持着生动而好的心情，开始寻找渐变的组合，随着他们的帮助，画面变得生动起来，要强调颜色选择的某些步骤并不容易，因为它是一个持续研究的创作过程。

总体而言，根据特定的调色板得到了4个颜色，其中，选择了保持对比度和完整性的和谐组合。

最后的选择是在中间有一个平稳的渐变组合，公司名称和标语位于此处，以保持较高的可读性。

尤其在像这样的项目中使用颜色很有趣，同时也是具有挑战性的任务。

至于流程，可以在单独的页面上搜索渐变组合，以查看颜色是否平滑过渡，或者相反，它们之间会出现第三种颜色。

另外，注意力集中在颜色本身上，因为它们应该清洁且充满活力。

然后，波浪继续出现在的页面，保持了一致性和完整性的感觉。它们是对第一页抽象成分和添加规划的元素的引用。

最后，添加了动画以显示所有元素相互交互并表示实时视图的方式。这是团队合作的一个很好的例子：“不同的方法和暗示在设计中给生活注入了活力。”

（由于动图太大，所以就展示一张png图吧！见谅）

设计师尝试了在形状上铺设渐变的不同颜色组合。在那个阶段，可以在渐变中改变一些颜色，调整渐变，并减少不透明度。

在这样的过程中，注意对比度并检查在某些布局区域中是需要高对比度还是低对比度至关重要。

另一个技巧是检查一个接一个渐变的颜色是否不起变形重叠等。

创建曲线时，建议尽量使用尽可能少的定位点，同时检查曲线在这些点上是否平滑移动。

至于这个项目的渐变，设计师的想法是将冷热色调结合起来，以最终的效果来看，整体画面将保持温暖的感觉，同时创新、明亮和年轻。

主要的渐变色是黄橙红，粉红紫，生动的青蓝色。在一种配色方案中创建多个渐变，试图改变主色的阴影，增加或减少其强度和不透明度。

这样设置了最亮的颜色组合，然后出现了较轻的渐变。将渐变与完全不同的颜色结合起来，她检查边缘是否具有吸引人的表现，以便页面不会看起来过于对比。

赵小马的话：

彩蛋环节（设计师提升技能的技巧）

• 首先，您应该培养自己的品味，观察所有领域的设计实例，不仅关注移动设计，网页设计、还是平面设计，建筑、摄影和艺术等领域都需要关注；

   

• 通过这种方式，您将知道现在的设计是在什么方向，什么样的想法和设计是时尚和吸引人眼球的；

  
  

• 接下来，你可以挑战自己创造一些小工作，当你在工作之余闲暇时，你可以一些小项目或者每天坚持做一张设计图，这是也是关于创建概念或解决当前的问题的关