登录页面设计是网站用户体验流程的关键部分。好的设计有助于推动访问者访问你的网站，并把新用户进行转化。它也给返回用户一个简单的方式登录到您的网站。
以下案例中我们将提供：当你设计你的登录界面的时候，你应该做什么和不应该做什么。不是所有的提示和例子都适用于你的产品。关键是选择最适合你的。
技巧1：更明显你不应该让你的用户到处寻找登录区域。他们找的时间越长，就会越沮丧。他们越沮丧，最终登录的可能性就越小。
一个很好的例子就是Gmail的登录页面。
你可以确切地知道你需要在何处登录，以及要在输入区域输入什么内容，上面的例子，如果你没有Gmail帐户，它允许你通过单击“创建帐户”来轻松地创建一个帐户。
好的用户体验是使你的登录区域明显，使你的用户尽可能容易地进行登录操作。
技巧2：使用第三方登录第三方登录正迅速成为用户登录账户的方式，理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。
通过允许用户使用用户的第三方账户中的信息来创建一个账户，可以解决所有关于这些问题。
让我们来看看下面的石墨文档和MONO登录时的选择方式：
甚至还有更方便的注册登录方式，手机短信验证码在注册的同时登录：
一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录，从用户的角度看，这很明显是一个不好的体验，但是产品的角度去思考就不一样了，产品为了获取用户更多的信息，则需要这样来设计流程。
这种设计流程该不该用，这需要在产品和用户之间进行权衡，第三方与手机短信验证码登录，在提高用户体验的同时，可以提高用户的效率，使界面更加直观。
技巧3：更简单因为环境不同，在中国很多网页端的网站，第三方登录很高效的产品很少。
例如，如果你的QQ没有在电脑端登录，因为即使选择第三方QQ登录，你也要拿出手机—打开QQ—打开扫一扫，进行扫码登录等一些列的操作。
又或者，当你想要登录behance,只要浏览器有记录之前的第三登录，点击第三方登录即可直接进入该网站，甚至不用注册。
可以看下面的腾讯网与behance的网页登录：
好的登录体验应该只有账号、密码两个输入字段，或者手机号码、短信验证码两个字段，以及使用第三方登录的选项。在简单、高效的同时，并为用户提供了很好的体验。
技巧4：区分注册与登录如果一个用户来到你的网站进行注册，或者想他们返回登录界面，这就需要让用户清楚的知道他在何处，下一步应该去哪里。
我们通过使用登录字段与注册字段的区别来帮助他们，让我们看看下面的dribbble注册界面：
创建账户的按钮已dribbble的主题能很快突出在用户面前。新用户可以直接在页面上注册，而返回的用户可以使用最上面右上角的登录两字。看到上面“sign in ”字段了吗？
dribbble使用了不同的颜色、布局去区分注册按钮与登录的入口，这样更加清晰明了。
同时可以看看dribbble的主页面，他们会把sign in 与 sign up 的进行区分，在 sign up 加上微边框，让用户能更快区分两者的不同。
技巧5：跳过用户名让用户用他们的用户名来进行登录真的不是一和很明智的做法，为用户省去记录你产品的用户名的麻烦，应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。
ins让用户有机会用他们的电话号码或电子邮件地址登录。
反例：
尽可能让用户同时用手机号码或邮件地址来登录，因为用户可能会忘记他们用来登录你的产品的电子邮件地址，所以这时，用户能使用手机号码进行登录。
技巧6：密码可显示给用户提供可显示密码的按钮，减少用户输错密码的操作，当输错的同时，可进行对错的字段进行纠正，不用全部删掉重新来。
让我们来下面的脉脉和片刻：
技巧7：记住用户信息还有什么比再次到你之前登录的网站或app,却发现你需要再次输入账户密码登录更令人沮丧的事情吗?
当你的用户返回到你的网站时，请确保他们已经登录了，或者为了方便登录，提前为他们预先填充账户和密码等字段。
谷歌在这方面做得很棒。每当用户需要重新登录到YouTube、Gmail、或任何其他谷歌品牌时，他们的登录信息都会被记住，使登录过程更加简单。
盟友银行允许用户勾选 “保存用户名” 复选框，允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法，展示形式可以多样化，可根据自己产品与用户需求来进行把控。
技巧8：轻松恢复密码有时你的用户会忘记他们的登录信息。当这种情况发生时，尽量让恢复过程尽可能的轻松。
公众号的账户密码输入栏有记住密码复选框，以防用户忘记他们的用户名和密码，不用每次进来都输入账户密码进行登录。
印象笔记对他们的密码做了一些巧妙的处理，让用户知道他们多久以前更改了密码。
这个小小的提示可以唤起用户的记忆，帮助他们记起密码。
如果用户忘记了他们的登录信息，要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧，你的用户将因此会喜欢上你的产品。
技巧9：让用户知道大写锁定已开启我们都有过这样的经历：令人沮丧地输入和重新输入你的密码都无济于事，结果却发现你一直开着大写锁定键。
可以通过警告你的用户，防止这种情况发生。微软的Edge浏览器还使用户可以选择在键入时打开大写锁定时打开通知。
技巧10：无密码登录让你的移动用户使用无密码登录，现在很多特别是金融类app，都可以让用户进行指纹登录，因为不像其他app一样可以一直保持用户已登录状态，在保障安全的同时能更便捷。
以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验，更多用户体验文章阅读可以关注公众号！！！
译文地址：
编译作者：设计探，公众号：设计探
本文由 @设计探 翻译发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议
文/朱秀颖 版面设计要将视觉元素按照一定的规律有序组合，并处理好各元素之间繁简、大小、疏密、曲直等关系，在设计中釆用夸张、比响、象征的手法来体现视觉效果，形成不同寻常的空间关系。
版面设计的最终目的是清晰准确地传达信息，那么如何实现版面的整体性并准确传达信息呢？
此类方法适合于文案篇幅较长、图片偏多或篇幅中等的设计主题。在图文混排时可根据文章内容，针对标题、文字和图片之间的编排，采取上下分割、左右分割、倾斜分割和曲线分割的排版形式。
①上下分割型。将版面水平分割成上下两部分，或上中下三部分，分割的页面可以采用均衡或对称的方式排列。对称能给人统一、庄严、信赖的感觉，均衡则可给人视觉上下平衡的感觉。
通常图片部分用作视觉表现，引发情感，使其充满感性，激发活力；文案部分则理性而静止，整体能给人以严谨、和诣、理性美的视觉感受。上下分割型的版面视觉流程往往比较自然，其特点是稳定、庄严、整齐、秩序、安宁、沉静。
②左右分割型。通常整个版画为左右两部分。在比例上同样可以采用均衡或对称的方式排列，设计时分别在左右配置文字和图片，当然也可分割成左中右三个部分，图片和标题可以居中摆放。
这样排列的版面容易形成强烈的动感，其设计往往因内容不同而做选择，较激进的文案可以人为制造左右形成对比，造成视觉心理的不平衡以加深文案的象；反之如果将图片或分割线虚化处理，或用文字、图片重复穿插，图与文就会变得自然和谐。
③斜放型。将图片、标题、文案做倾斜排放，使版面增加动感并造成不稳定的效果，这种版式设计容易在宁静之中起到“平地起惊雷”的视觉。
④曲线型。将图片或文字以曲线的形式排列摆放，最容易产生韵律与节奏的感觉。在版式结构中，将曲线设计穿插其中可以起到活跃版面，减少观者视觉疲劳的效果。
限定分隔法即利用线条、线框或图形对文字进行分隔或限定，既能增强版面空间的相互依存，又能使版面清晰、明快、条理、富于弹性。线条的粗细、竖横、直曲、虚实、疏密、长短的对比变化，更能使版面新颖活泼充满动感。此种方法对文案相对独立和短小集中的信息篇幅最为适宜。
①以线分隔。利用直线将不同文案中的多种信息组合成块状，并把各种视觉要素有序串联，重新划分为不同的功能区域，整体达到图形与文字关系的次序化、条理化和规范化，以加强文案的集合性。
②以线分栏。在栏与栏之间插入直线进行分隔限定，使栏目更清晰更具条理性、且富弹性，常常用于相对较长的骨骼式排文的版式中，可使文章的可视性大大增加。在整体版面中，若将直线限定为等比例的栏面，可以获得秩序井然与统一规整的美感；若将直线限定为不等比例的栏面，不仅可以强化主体，还可以丰富空间层次。
③版心四周加框。在一个版面中四周加上分边框，此种方法便于理解，而在形式上则可依据内容的差异采用不同的表现方式使用多样的线形与造型。既可以是单纯的矩形、圆形，也可以是组合的几何形，还可以是具象或抽象的不规则图形造型，产生紧凑、完整的视觉效果。
针对以图像为主体、文字为辅助内容的版面，为了传达强烈的视觉感受，我们往往可以采取延伸设计的方式，使图片充满视域。在具体操作中通常有以下几种形式：
①出血。将版面中的图片等元素扩大到页面边缘，使其占据整个版面或者版面中的一个边缘，其目的是使图片看起来更有张力，视觉效果更强烈。
②跨页。将图像分跨到同视域中的两个页码之上，让所用图片的边缘超越版心至切口，是延伸法的另一种表现形式。打开页面，外分内合，张敛有致，在视觉上造成版面开本的扩张，具有大气、完整、美观之感。图片上下左右均可做留白处理，适当的处理会增加版面的通透性与舒展感。
③版式重复。对篇幅较长、要占用多个页码的同一文章反复使用同一种版式语言，以强化其思想性。此种手法是另一种层面上的延伸法，一方面能在视觉上起到连续的效果，另一方面也可以增加文章内容的一致性。反复强化的版面很容易使文章要传达的思想得到延伸，并加深受众对信息的记忆。
所谓自由就是版面中的各视觉元素在页面中自由分布，相互转换使页面产生活泼、生动的风格。此种方法不拘一格最容易体现设计师独特的个性。
①就图片而言，可通过方向的旋转、对立，造成行之有效的视觉攻势；可以借助人物动势、视线、近景、远景等变化来获得方向感，利用强弱对比达到视觉感应的最佳效果。较多图片的处理常可运用色彩转换、图像重叠、图像透叠、空间重叠的方法。
②就文字而言，设计师可以结合文章的思想内容，综合使用各种版式设计方法。例如：可不等量分割文字阅读方位，可以呈现多方位、矛盾化以达到视觉的张力；文案文字在同一版面中的横向分割与纵向分割相结合、斜向排列与正向排列相交错等等。
（此处已添加圈子卡片，请到今日头条客户端查看）① 官方头条号：设计智造 顶级创意设计师必备
② 本篇为 设计智造www.cocoo.top 编辑整理，版权归原作者所有，转载请注明出处！
文/杨亚穹 版面设计并非高深莫测，本文论述的八条核心的规律，几乎都不是孤立的存在版面当中，而是在同一版式中常常有多个规律法则一起存在，相互融合、相辅相成。抓住版面设计中最关键的规律、法则和版面编排技巧后，就可以设计出优秀的设计作品。
版面设计又称版式设计，狭义讲就是研究图形、色彩、文字在版面中的排列组合规律，又可称为版面构成。 在各式各样、浩如烟海的作品中，其实或多或少都有遵循一些基 本的版面设计的规律，最常用的版面设计规律与运用技巧如下：
均衡与对称的规律可以说是众所周知，但是几乎每个版面都离不开它的运用。 在实际设计中，设计元素对称的确可以让人获得相对稳定、和谐的视觉感受。 版式中的对称也包括对角线上的对称。
均衡可简要概况为等量不等形，就是在版面中左右或上下两部分的设计元素，也许不是同一类图形，但是视觉感观上却是平衡的。 例如：一边是一个产品图像；而另边是一些文字的组合。最好理解的方法，就是将文字也当作种极为抽象化的图形来对待，以便能更好感受出其量上的平衡。
网格版式简言之，就是将版面划分成不同的方格形区域。 在版式设计中，网格可以是很直观的格线，也可以是潜在的不可见的格线。 网格版式它已经被诸多设计软件所认可，并加入了网格的功能，方便设计师设计时，更加快捷。 例如：PS、AI、 ID等专业软件，都有网格显隐功能。
网格版式设计是相对更加快捷，但是也有其缺陷与不 足之处。 例如：版式不太活泼生动。打破这种网格的呆板的重 要方法之一，就是将图形元素去底化，使其边缘不规则化，没有了方形的底，图形突破条框边界的约束，会变得生动，在版式中更活泼自然。
在实 际版面设计工作中，留白未必就是纯白色的区域，它也可以是饱和度相对较低或明度相对高的单一色块区域，留白的区域是为了更好地衬托、显示出中心主题元素(可以是图形或文字)，给要表达的中心主题元素更加多的视觉空间。
虚实也是版式设计中突显中心的一种重要法则规律，常用的手法有： 将背景区的图形的轮廓变得模糊不“肯定”，类似 于摄影中的大光圈，将背景物虚化形式，以及色彩变淡或是变灰等方法。
好的版面设计作品，其给予 受众的可读性十分重要，方便人们阅读，元素排列的秩序与条理性比较重要。 变异是规律性的突破，变异点又常常是设计创意最为出彩的关键点。一般版面的设计，都要整体上秩序条理，而局部区域可以变异，突破原有规律性。方法如下：
①“外框法”将设计元素都放入同一种形式的框 架内，例如： 方形的或棱形的外框。
②“同色系法”将 批图形为了视觉上的统一和秩序，可以色相都变为同一色相，或者是冷暖相近的色系。
③“线形书架法”用线将 版面分成不同的小区域，每个区域如“书架”的一个格，这也可算是网格的一种更直观、具体的呈现。
在多页型设计或系列型设计中 常常可以用到统一，设计中的元素，最好都用一致或相类似的元素。 例如：用统一的图形装饰框等，产生视觉上的关联性，并能使整体更加统一化、一致化。 当然统一性法则不仅仅局限于图形形状上，也包含在色彩表现上。
例如：多页设计中，将各页的图形元素用同一色系，可以将图形的视觉更统一化。关于统一法则，还包括图形的统一的表现形式。例如：所有的图形都用一样的插画型的表现方式，令图形元素的表达更加视觉统一。
呼应适用于用于图形元素的布局。图形元素大小也许并不相 同，但是在同一版本面中出现二次以上，就会产生出一种“不知不觉”的呼应性。
版式常用的分割方法可 以归纳为：
①线条分割法。可以是直线，也可以是曲线的形 式，就是用线将版面分成不同的区域，每个区域编排不同的元素。
②图形分割法。以图形的边界，来划分开版面，这种分割形 式更加生动，不像线条分割法那样有清晰的边界线。
③色彩分割法。就是用不同的色彩区域，将版面分割成不 同区，这种方法是一种比较新型的版面划分形式。
④文字分割法。就是用单个文字边界，或多个文字排列组 合出的边界，来形成一种版面的分割。
版面的设计用色也决非任意而为，也有其内在规律可 循：
①如为某一品牌设计企业宣传画册，画册的主色调可以是企业的标准色，也可以是标准色的同色系的一个色彩，这是常规的选色方法之一。
②还有一种方法，就是画册中主要产 品图片的背景色，或是同类色，也可是对比色，用以作为版面编排的底色或者是版面辅助图形的用色。
③当然，有时设计师也选 用彩度极低的色彩，作为版面编排辅助图形用色或底色，例如： 无彩色的黑色、白色及各种颜色加入灰色。
以上是总结的版面编排的一些规律与心得，难免不全及 不当之处，大家要结合自己的情况， 掌握这八条核心的规律 并融会贯通。 设计就是有容乃大，需要无用之用的理论与理念去支撑、引导。
① 官方头条号：设计智造 顶级创意设计师必备
② 本篇为 设计智造www.cocoo.top 编辑整理，版权归原作者所有，转载请注明出处！