设计实战 — 登录页的既定与未知

近期在设计产品帐户中心登录页的改版，作为品牌重造的落地需求之一，整理了其中的探索思路与方向。因为现在登录已经收敛到非常高效的框架，而且受限于公司统一用了同一套公版的QQ登录介面，所以这次的设计会侧重于信息构建与品牌透传的方向，从新的角度出发，希望能够满足登录页面的既定操作，同时探索出更多可能性。

设计思路

从工作的过程中逐步探索出几个需求思维模型，帮助自己更有里有据的思考设计方向。

需求探索模型 在需求最早期使用，我会使用它在初期厘清方向或是判断该投入多少时间，避免后期反工，同时也从多个维度拓展可能性。

模型可以拆解成五个部分 — 需求为核心，优先考虑TA及场景，依照需求的大小探索商业可持续模式，运营推广模式，技术创新模式及社会责任等延伸方向。

需求规划模型 当开始进入需求规划时使用，我会使用他排序目标的优先级，同时明确需要的资源。

模型分成三个部分 — 背景分析，基础需求及延伸目标。其中基础需求是必须满足的目标，延伸目标是有潜力的但可因为资源关系排后的目标。每个目标都必须要有其商业价值及衡量效果的指标，同时设定最低预期，作为完成度的底线。

具体而言，接到一个需求的时候，先明确设计目标，优先满足基础需求，其次会近一步探索其他的可能性，思考方向通常会从一堆问题开始，从这些问题的答桉中慢慢摸索出解决方桉的边界。同时找到背后的技术支撑，最后是整理好思路，有策略的与团队沟通，提高提桉的成功概率。进入规划阶段的时候，则必须排序优先级，才能高效推动。

需求背景

此设计主要涉及管理员登入帐户中心时的登录页设计，连带考虑客服使用的工作台以及移动端的登录场景。

基礎定義

理解需求背景，操作路径及使用场景，发现并定义问题。(涉及后台数据，部分内容屏蔽)

主要使用者是谁？使用频率？

有哪些入口，从不同入口进入的用户是否有相异的使用习惯？

作为管理员使用产品的流程中必经的路径，是否能起到除基本登录操作之外的功能？

透过需求规划模型，可以明确目标的重要性，商业价值及风险，并以此为依据厘清所有目标的优先级排序。在此需求中，因应品牌风格升级，建立一致的品牌认知是必须满足的基础需求。其次，从背景分析可以了解到登录后台是一个比较高的场景，且面向的是同时是使用者与决策者身份的管理员，因此延伸出是否能在登录页透轻量教学及推广活动内容的设计目标。

品牌透传

随着品牌视觉体系升级，线上的登录页已经不符所需，陈旧的设计除了视觉体验过时，同时也缺少与品牌的情感连结，难以建立品牌认知与品牌认同，所以对于登录页的改造是必要且迫切的。主要从排版样式，视觉动线 ，品牌元素及适配逻辑四个方向考虑如何将品牌透传适当的结合到登录页。

哪个程度的品牌透传在该页是合适的，不会影响信息呈现与主操作？

当有其他站点的时候，设计方案是否拥有足够灵活性？

用户使用其他端登录时，是否能感受到一致的品牌体验？

💡Gusto 将插图与登录框结合，传递情感化，同時將視覺動線保持在中心

💡Mailer 利用场景化的位图引起用户共鸣，左侧的留白凸显登录框

💡Uber 使用由上向下的排步，视觉动线清晰，插图风格俐落呼应品牌气质

💡Task 在右侧小范围的利用方块点缀，高饱和的色彩与排版赋予版面活力

💡Evernote 利用Pattern在背景铺开，虽然满版的面积但是淡色的线条仍然平衡

💡Contentsquare 在顶部非常轻量的使用品牌色点缀

排版方式

分析市面上64个登录页面，主要可以归类成三种排版方式。

💡Pipedrive 居中有框

💡Exponea 居中无框

💡Xsellco 左右分栏有框

💡Dropbox 左右分栏无框

💡ServiceTitan 左右分割

视觉動線

进入页面之后，在第一时间会依照元素的吸引力会对使用者的视觉动线做出引导。理想的情况是减少该动线的锚点，同时确保主操作登陆被涵盖在该动线之中。

👍Upfluence 动线相对简洁，左右分割的布局也很明确的区隔登陆框与其他元素

👍GitPrime 元素较少所以使用居中的排版，视觉动线只在中间区域

😲Trello 元素的分布较分散，第一时间会注意到左侧底部的插图，最后才会引导至登陆框

😲Socure 分素的分布同样分散，同时因为无白色盒子与底图做区隔，更难找到登录框

品牌元素

品牌元素的建立可以从几个方向考虑，从品牌关键字到品牌特徵及质感等方向的定义，构建属于品牌独特且识别性高的设计语言。

品牌关键字 从感官上思考能够表述品牌气质的概念，其中亲和，高效与轻快作为主概念，同时延伸出次级概念作为设计指标。

品牌特徵 从视觉上思考能够表述品牌形象的特徵，主设计语言为斜线的分割以及藉由颜色变化与面型组成构成的空间感。

图型设计 利用斜线与箭头构建图型。

拆掉的立面让整体呈现开放的空间关係，维持轻量感。

质感设计 质感在渐变色彩的过度与光影的变化形式做了多种尝试。

概念提案 依照前面的探索，选择合适的图型提出三个概念方案。

在细节体现品牌设计语言。

图形及排版的设计需考虑到多字段及多产品的情况能够灵活适配。

适配逻辑 通常情况下，我会用1920的画板开始设计，因为从数据可以看到1920x1080是目前最主流的分辨率，用这个分辨率设计可以直观的体验大部分使用者的使用感受。内容控制在1080以内，这样夹始在最极端的情况，1240的分辨率底下两边都还有80 pixel的留白。

需要注意的是，大家对宽度都会有意识的控制，因为只需要拉两条参考线就可以起到感知，但是常常会被忽略的是对高度的把控，导致的问题是每一屏都看不完内容，需要反覆拖拉，亦或是前面几屏的内容不足以吸引用户，用户很快就流失掉了。

动态设计

希望能够传递连贯的品牌体验，利用动态将三个页面流畅串连。

概念一 页面跳转的重点落在快速响应

概念二 页面跳转的重点落在视觉延续

时间错位 利用元素出现的时间差做出层次感，可以理解为设计师是一个故事传诵者，一个故事要说的精采，必须要循序渐进，让听者有带入感。文案的主次关系透过出现时间的错位影响了阅读的顺序，同时能够更好的表述内容。

反應時間 对于经由用户触发的动态表现，首要准则是灵敏。动态整体时间短不拖泥带水，尽量维持在300毫秒内走到定点。动态变化过程将曲线顶峰调前，可以表现出当触发的当下就即刻反应，后面精准定位的感受。

方向性 人们视线本能的会跟随物体移动的方向，可以从三个方向考虑，动态开始的位置应与触发的位置尽量对齐，动态结束与起始的位置应尽量有信息关连(因果关系)。动态变化的方向应从整体页面考虑，尽量维持在同一方向的变化，以及同一时间尽量只触发一个动态效果，避免混淆。

信息构建

除了常规的登录窗之外，作为管理员使用产品的流程中必经的路径，是否能呈载更多的信息，将平时隐藏较深的教学类内容提前曝光，帮助用户更好的使用产品。 主要从内容类型及信息厚度两个方向考虑。

使用者在该页的停留时长？内容的信息量及呈现方式？

内容的来源与更新频率？是否能利用现有素材搭建？如果需要新生成内容，该如何推动内容的产出？

是否能依据使用者的画像推送合适内容？背后的技术支撑？(新手老手/使用产品套餐/促销活动/行业规模/行业认知)？

内容类型

💡Marvel 利用登陆页推广新功能，针对有决策能力的管理员进行透传

💡InVision 从官网进入可能是非客户的误操作，可以在登录引导留资进行后续转化

💡BirdEye 利用登陆页推广促销活动，续费优惠或是利用用户进行拉新

💡Netlify 展示功能教学，快速给予使用上的小贴士，帮助用户更高效的使用产品

💡StackAdapt 展示重点客户的引言，建立信赖感的同时培养客户忠诚

💡HelloSign 展示产品的业界影响力，同样建立信赖感的同时培养客户忠诚

来源与更新频次

信息厚度

确定展示的内容类型之后，需要定义在登录页面所透传的信息厚度。因为登陆页属于频次高但停留时间短的页面，所以在信息上倾向展示轻量的内容，在短时间就能读完，不影响登录的主操作。

💡Zendesk 利用明确的块面凸显信息，虽然元素简洁但使用位图强化了视觉感知

💡Chargebee 依照常规由左至右的视觉动线，会先看到信息

💡Plivo 則是先看到登陸框，再關注到信息

💡Netlify 偏向轻量的内容，不会抢过主登录操作，同时满足短时间的阅览行为

厚度把控

设计思考

探索设计亮点 落点商业价值

商业设计裡，每个设计都必须要满足于特定的商业价值，可以是提升转化率这种业务导向的，或是建立品牌认知这种偏体验导向的价值，当你为每个设计目标找到商业价值之后，可以更好的为其排序优先级并推进。

想法考虑现实 设计力求克制

虽然在脑爆的时候可以天马行空，但是在设计的时候必须考虑可行性，尤其是在开发期限短的需求裡，必须要确保每次的讨论都是有依据的，并且能产出可以推进的结论。除此之外，必须要克制的运用元素，考虑页面的定位，依照内容的优先级给到合适的信息厚度。

釐清提案思路 维持逻辑自洽

最近在看一部网粽”心动的offer”，是一个律政实习实境节目，其中常常提到，当你在表述想法的时候必须要做到逻辑自洽，否则听者会自然的对你说的内容产生疑虑。首先在设计的时候必须要从头到尾在流程上做完整的疏理，其次在表述的时候注意节奏，包含前面的背景提要到核心的亮点介绍，必须要让听者的注意力落点在提案的重点部分，理解提案的核心。