一、什么是UI设计？UI即UserInterface(用户界面)的简称。UI设计是对软件的人际交互、操作逻辑、界面美观的整体设计。二、UI设计按行业细分一般分了4种行业1、移动端UI设计师---手机平板上的APP和主题设计2、PC端UI设计师---电脑上的软件和网页按钮设计3、游戏UI设计师---网游和手游上的界面等设计4、其他UI设计师---AR/VR银行取款机界面，电影自动取票界面等
UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。
好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。
一个优秀的详情页可以让用户清晰且愉悦地接收到已有信息，并为用户的下一步操作做出一定引导，那什么样的详情页设计才是好的设计？本篇文章里，作者结合实际案例，从目标、内容、视觉等方面对详情页的设计策略做了总结，一起来看。
一个从0到1的详情页应该如何设计，需要遵循什么设计原则，可以参考什么设计模型？这篇文章，将会以「设计大侦探」知识星球详情页为案例，告诉你一个详情页设计的完整过程，帮助你掌握三个重要的思维模型和一套已验证的设计方法。
一、导读1. 详情页是什么？详情页就是一个产品或服务的说明书。我们听得最多的是电商详情页，往往会把这个词直接定义为电商详情页，但事实上，任何产品、服务都有详情页，比如一个医疗保险产品就需要详情页，让用户从这个页面获取到这个服务的明细和流程，从而吸引用户下单购买。
本文所指的详情页，就包含了各类产品、服务的详情页，所引用的案例是一个知识付费行业的知识星球详情页设计。
2. 详情页有什么作用详情页像一个产品的服务前端，用户可以从这个页面全面了解到这个产品的细节，比如服务人群、核心优势、服务流程和注意事项等。
详情页也可以作为一个落地页，比如当我们去销售一款产品的时候，我们设计的H5或Web的页面既属于落地页也属于详情页。一个成功的详情页设计可以为产品带来超高的转化率和销售额，相反，如果详情页设计得不好，即便投入重金推广，转化率也会非常低。
3. 详情页的生命周期详情页就是产品的表现层，它和产品一样，同样有生命周期。在不同的生命周期，有不同的焦点和策略，比如设计大侦探的知识星球，在处于引入期的时候，更看重对服务体系的验证，所以对详情页的设计要求是以快制胜，快速完成MVP版本。
4. 适合阅读人群本文6623字，主要分为四个部分，不仅仅适合UI设计师、UX设计师、产品经理和运营，还适合于电商设计师、品牌策划和互联网从业者，其次对于创业者来说，这篇文章将会让你熟悉一套详情页设计的完整流程，有效降低时间人力成本。另外本文所指的甲方，主要指设计师的上游，产品、老板或业务方。
二、制定目标不管做任何项目的设计，如果不明确设计目标，那就没有方向，也无法验证最终的设计成果。对于详情页的设计，也是一样。虽然看上去好像只是一个页面或图片，但其实详情页和产品一样，也需要不断的迭代优化。
1. 设计背景「设计背景」就是去了解这个详情页为什么做，决策流程是什么样的。这个环节我们可以使用常见的5Why分析法，不断追问，直到了解甲方设计的真正原因。
千万不要小看这一步，如果你不去弄清楚这个项目立项的关键原因，帮助甲方梳理好设计目标，那么甲方就会容易变动需求。比如大侦探为什么需要设计一个详情页，这是因为我们的知识星球服务体系已经形成闭环，所以准备开始试运营，验证商业模式。
2. 需求分析「需求分析」就是在了解这个详情页的「设计背景」后，针对甲方的真实需求进行深入的分析，我们可以采用5W2H分析法，去挖掘具体要做什么、给谁看、在哪里看、喜欢什么风格等问题。如果是一个外包项目，还要去结合甲方的预算、周期和公司的利润去考虑，需求的挖掘一定要深入，不要做模棱两可的工作，否则整个项目的设计作业都会随时变动。
比如大侦探的详情页需求就是要快速完成一个MVP版本进行试错，看看知识星球的服务是否和用户的需求匹配，所以对整体的视觉要求并不高，更注重设计效率和完整性。
Tips：对需求的拆解、挖掘和梳理能力，是一个优秀设计师通往顶级设计师需要具备的能力，要学会快速阅读甲方的需求，做出引导和判断。
3. 设计目标当我们把「设计背景」和「需求」梳理好以后，我们就可以提炼出这个详情页的「设计目标」。「设计目标」不仅仅可以给设计团队设定一个非常清晰的方向，也是验证最终设计效果的标准。比如大侦探详情页的设计目标就是在3天内快速设计出一个MVP版本的详情页，其次设计风格要符合品牌调性。
三、内容设计在确立好「设计目标」以后，就进入了「内容设计」的环节，通俗点说就是文案策划和设计原型。但这个部分的权重是最高的，对于一个详情页来说，如果内容没有设计好，视觉效果再好也是徒劳，它无法吸引用户购买产品，所有的投入都会白费。对于设计师来说，这部分的工作几乎很少涉及，但当你掌握这套方法以后，你的设计价值将会提升。
1. 用户分析在设计内容之前，一定要先思考，这个详情页给谁看。这不仅会决定文字调性、内容结构、视觉风格，还有传播形式。如果是一款给老年用户使用的产品，你会用“给力”这些词吗？
其次，我们要去思考这些用户的特征、偏好，如果用户是一群夜猫子，那么我们可以考虑设计一款深色的详情页，方便他们在夜晚时候观看。
最后，还要考虑不同的用户人群。比如大侦探的详情页，对社群会员和非社群会员将会在内容结构上设计不同的内容。这是因为社群的会员对大侦探已经非常熟悉，对于品牌的介绍就可以尽量弱化，节省空间。而面对非社群会员，就需要把品牌介绍加入，添加背书、增强信任状。
Tips：拿到一个项目，对用户分析是最基础的一步，一定要弄清楚谁来观看、谁来使用、他们有什么特征。
2. 场景分析确认好「给谁看」以后，就要考虑用户访问详情页的真实场景。一定要去思考用户浏览详情页的场景、设备、平台和打开方式等，比如详情页是以H5形式发布，还是以朋友圈传播为主，是展示在知识星球还是展示在小鹅通？不同的浏览场景都要去考虑不同的内容展示方式，
大侦探在知识星球展示的详情页，我把价格放在最上面，有朋友给我说，我用微信打开的发现头部被遮住了，但在知识星球的展示页，这个位置却是最好的激活方式。这就是场景导致的差异。
Tips：在考虑展示场景这个细节的时候，我特意去调研了知识星球的详情页尺寸、展示方式和设计要求，最终我获取了知识星球平台仅支持3张图片，最高图片高度6000px的关键信息。
如果忽略这个信息，当整个团队辛辛苦苦完成设计稿的时候，却发现高度不能超过18000px，这个时候改起来会非常痛苦。
所以设计一个详情页，一定要模拟用户真实的访问场景，效果。
3. 竞品调研不管做任何设计，都少不了竞品调研。「竞品调研」的维度有很多，比如内容、设计风格、营销方式、服务流程等。在我们去做一个从0到1的详情页时候，找到一个适合我们自己的竞品是一个非常高效的工作方式。往往我们费尽心思思考的东西，其他人都已经做了，所以竞品调研这一步，一定要花上时间。
Tips：竞品调研也要明确目标，否则会导致内容过于分散，不知道从哪些维度入手。
4. 内容规划从这一步开始，我们进入设计执行阶段。一个优秀的详情页设计，需要从用户访问这个产品到下单购买的整个体验旅程进行全面地设计，不仅仅需要专业、创新的内容，更需要设计营销策略。
1）思维模型
以下三个思维模型，是我在详情页设计中最常使用的设计模型。FABE+SPIN可以帮助我快速提炼一个详情页的内容结构，而社会心理学可以加入营销策略手段，提升详情页的商业价值。
① FABE销售法则
FABE销售法则是一个把商品的特征（Features）、商品的优势（Advantages）、顾客利益（Benefits）以及对卖点的证明（Evidence），按照科学的逻辑有机地结合在一起的技术和工具。如果你以前思考过一个详情页到底应该先放「品牌优势」还是先介绍「用户痛点」，那么这个模型可以帮助你找到一个可参考的标准。
② SPIN销售法
SPIN销售法，即探询现状(Situation)、找出困难(Problem)、引出潜在后果(Implication)、介绍解决方案(Need-payoff)。这个模型不仅可以用来定义内容结构，还可以作为文案描述的模型。
比如当我们去介绍一个产品的时候，我们可以按照SPIN模型撰写，这将会非常有说服力。随着经济的形势越来越差（S），UI设计师的职业危机也越来越大（P），只是一个纯执行的工具型设计师将会面临着降薪或失业（I），这个时候如果设计师还不注重产品思维能力的学习和提升（N），那么以后的竞争力将会越来越弱。
③ 社会心理学+陈勇转化六要素
看过「产品拆解」的朋友应该对西奥迪尼的社会心理学《影响力》六大说服力原则有印象，他们分别是互惠、承诺和一致、社会认同、喜好、权威和稀缺，而国内营销专家陈勇老师的「转化六要素」也是从这本书提炼出来的。
这两个模型，对产品的营销设计有非常大的帮助，比如为了吸引用户产生兴趣浏览，就要使用「互惠原则」，给用户送红包；为了提升用户下单速度，就会使用「稀缺效应」制造紧迫感。
2）低保真原型
“没有原型就没法讨论。”凯瑟琳·麦克尔罗伊在《原型设计-打造成功产品的实用方法及实践》的这句话，真的大道至简。内容设计这个阶段，往往会陷入没有思路、没有灵感的局面，这个时候，一定要大胆动起手来，其次我推荐使用Xmind工具来设计，这样不仅可以发散思维，作业成本也非常低。
① 梳理内容结构
页面的内容结构就是这个页面要放什么内容，内容顺序怎么排列，这个时候我们就要利用FABE或SPIN模型了。如果你一点经验都没有，你可以直接按照FABE的模型去做，从这个产品是什么、有什么优势、解决用户什么痛点和做了什么真实案例去策划，你会发现这按这样结构去设计的详情页即便不加任何内容都可以拿到及格分，用户去阅读起来都会感到自然。
② 加入营销策略
营销策略就是在页面内容加入营销手段，从而吸引用户浏览，购买服务。比如很多产品去推广的时候，都会给用户送各种免费礼包，这其实就是利用了「互惠原理」，让用户占便宜，吸引用户浏览。
再比如一些医疗服务会加入很多真实的医生专家、真实病例，目的是增强服务的背书和打消用户的顾虑。还有我们经常会看见限时加入、限名额加入，是利用了稀缺效应，制造下单的紧迫感。
Tips：当我们把这一步完成的时候，其实可以和甲方进行初步的沟通，这样可以降低下一步工作的返工率。
3）高保真原型
当我们完成低保真模型以后，页面的框架就是设计好了，接下来要做的就是根据框架去设计文案结构和表现形式。
① 设计文案结构
文案结构像什么呢？文案结构就像一个歌手去写Demo时候，没有歌词，但可以随着哼唱的旋律进行创作，这样作词人可以跟随旋律去填词。
很多设计师往往觉得没有文案就无从下手，其实这是能力不够。我们可以先去设计文案结构，让文案策划跟着你的结构创作，这样可以极大提升工作效率。
② 构思表现形式
当我们在设计文案结构时候，还要去思考设计的表现形式。不要以为这是视觉设计的工作，相反，在这个环节先去思考设计的最终效果，这会对详情页的最终呈现效果有非常大的帮助。
比如当我们要去展示一个产品的成功案例时候，可选择的内容形式其实非常多，可以放用户的微信评论截图，还可以按省份、按小区去展示用户真实的评价，如果你没有任何创新力，全部丢给视觉设计师，最终的视觉效果也会大打折扣。
Tips：在高保真原型设计好以后，就可以进入第一轮的设计评定了。这里有个技巧，一定不要只发一个图片给甲方，我们一定要把自己的设计思路阐述出来，这样才能有说服力。
四、视觉设计在高保真原型设计稿确认后，如果是一个外包项目，这一步其实是一个项目的里程碑，需要甲方签字盖章才能继续下一步的作业。视觉设计的工作就是我们平时最熟悉的设计环节了，文案、原型都确认好了，现在开始炒菜了。视觉设计虽然服务于前面的工作，但视觉设计也可以作为一个单独的版块，其次也需要进行调研、分析和制定设计策略。
1. 配色一般我们可以根据Logo或VI去确定页面的配色，比如主题色、辅助色、渐变色等等，这样会确保整个设计的统一性。其次也需要注意，如果品牌的Logo颜色很Low，要尝试去调整优化，如果是一个外包项目，这其实是业务拓展的好机会。
Tips：关于设计的配色，推荐一个非常实用的网站Paletton（ ），你只需要输入品牌色的色值，就可以获取和这个颜色相关的互补色、邻近色等，这样会保证你的配色不会出现问题。
2. 字体字体的选择也不需要过于纠结，因为现在大部分字体都有版权，我们可选择的字体并不多。如果你使用苹果电脑，苹方就很不错，或者思源黑体、阿里巴巴普惠体等，WIN系统直接使用黑体、微软雅黑就可以。至于主视觉的slogan字体，在条件允许的情况下，可以考虑使用付费字体或者让字体设计师单独设计，这样主视觉会更吸引眼球。
Tips：新手设计师往往会去找一些花里胡哨的字体，但事实上根本没有必要，而且会惹来不必要的风险。另外任何页面的设计，不管是banner、网页还是UI，字体不能超过3种，包含英文，一定要保持设计的统一性。
3. 排版一个详情页，可以拆分为N个部分，每一个部分的内容，又可以拆分为标题、副标题、文本内容、主视觉和背景，然后每一个标题和内容样式，你只需要设计好一个，就可以重复使用，这就是最简单的排版技巧。罗宾·威廉姆斯的《写给大家看的设计书》这本书提到的四个原则——亲密性、对齐、重复和对比，只要你掌握，排版就不会出错。
Tips：越优秀的设计，排版其实越简单。我建议大家去读一遍《写给大家看的设计书》这本书，你会发现不管多复杂的设计，其实只要遵循这四个原则，都能变得很简单。
4. 图片选图的原则很简单，高清、和主题相关，调性统一。图片千万不要拿来就直接用，一般都需要进行对比度、色彩饱和度的简单调整，其次要进行锐化，保证图片高清。
都说一张好图胜过千言万语，但是现在一张好图片的价格不便宜，所以在没有付费图片的情况下，在设计表现形式上就要更多的扬长避短，比如通过插画（成本也高）、图标、手机模型、思维结构图等。
Tips：图片一定要保持清晰度，这个是设计图片最需要注意的细节，如果一张图片是模糊的，千万不要用。
5. 修饰元素修饰元素会增加页面设计的个性化，但又不能太过于花哨。一般可以从Logo或VI的元素去提取，比如大侦探Logo的“胡子”、“烟斗”，这些元素就成为了整个页面的点睛之笔。不仅仅丰富了页面的设计，还增强了品牌识别度，加深用户对品牌的印象。
考虑到详情页一般都会很长，我喜欢设计一个进度条，这个进度条将会跟着用户浏览页面的高度而变化。这样的修饰元素，将会给用户带来非常友好的体验，你可以想象当你在一个没有站点提示的公交车上，你的心情会有多慌，这和用户访问一个不知道多长的详情页是一个道理。
Tips：我在过去诊断过很多设计的作品集，其中就会发现有很多设计师加了很多不相干的修饰元素，这会导致你的设计显得非常花哨、业余。
6. 优化慢工出细活，对于视觉设计，只有不断地尝试各种效果的设计，你才能找到最佳的样式，这个没有任何诀窍。不管这个设计师有多资深，做什么类型的项目，只有不断地尝试各种效果，才能做出更好的设计。大侦探的详情页设计，尽管时间周期很紧，但我也前后尝试了多个版本，数次的推翻、重来、优化。
Tips：一个好的设计稿，没有任何诀窍，千万不要以为那些大神做设计时间会很短，越厉害的设计师对设计的要求越高，达不到自己心理底线的作品可能都不会发出来。所以做设计一定要有耐心，要去不断优化，你才能设计出越来越优秀的作品。
五、设计说明当页面设计完毕以后，千万不要以为结束了。在给甲方展示作品之前，不要直接发一个图片过去。这样的交付没有任何价值，不管你做得多好，如果缺少对设计思路的阐述，那么你的设计价值别人很难感受到。所以对设计稿的设计阐述，特别重要。
1. PPT展示PPT的展示效果是最好的，特别是向甲方展示设计方案的时候，当你在的前面，向甲方展示着你的设计思路，那是一种非常美妙的成就感。PPT展示的内容可以从我们的设计流程提炼，一般我会控制在10-15页，演讲时间10分钟左右，这个长度给甲方演示起来非常棒。
2. 长页面展示长页面展示的时间制作成本低，如果交付时间太紧了，可以选择这种形式。这种形式虽然基础，也要把设计品质把控好，不要因为太过粗糙而把整个团队辛辛苦苦的设计方案掉身价了。
六、结语此次详情页的设计分享教程事实上也是一个MVP版本，有很多设计步骤的细节还不够仔细，不过我们要像产品迭代一样，不断去优化设计，完善这个系统方法。我相信，对于很多设计师来说，今天这个从0到1的分享，已经让你们明白一个完整详情页诞生的过程，从而提升工作的主动性，不停留在一个纯设计执行的阶段。
专栏作家
廖尔摩斯，微信公众号：设计大侦探，人人都是产品经理专栏作家。连续创业者，擅长产品设计拆解、书籍解读。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
编辑导语：如何理解和搭建界面设计框架？在构建界面设计框架时，产品设计师除了需要考虑到用户需求和用户的使用体验，还需要将竞品设计、媒介属性等方面也纳入考虑。本篇文章里，作者对搭建界面设计框架的几个维度做了总结，一起来看看吧。
讲完需求分析、设计策略、信息架构等概念，终于到了可见的交互设计产物：界面框架。那一个界面的框架究竟是如何设计出来的呢？我们可以从4个维度来寻找答案：
图1 界面框架的构建逻辑
分别是用户需求、业务目标、媒介属性和竞品设计。
为什么是这四个维度呢？我相信大家对用户需求和业务目标都没什么疑问，因为这是产品体验设计的基石，我们整体产品设计目标就是想通过满足用户需求，来助力业务目标的达成。
图2各目标之间的关系
那为什么要考虑媒介属性呢？因为不同的媒介，形态不同，可供性和系统规范也大相径庭。
每个在其生态上产品，都需要遵守其基本的规则，才既符合平台上架的标准，也符合用户对平台上产品的使用预期。
最后是头部竞品设计，细分到某个具体品类的产品，头部竞品会塑造用户对该品类产品的认知和习惯，作为后来者，有必要了解并借鉴头部竞品的一些设计模式，以顺应用户的心智模型，减少用户的操作成本，所以竞品设计也是设计师需要提前进行分析的。
下面我们以浏览器首页框架设计为例，为大家讲解界面框架的构建逻辑。
一、用户需求关于用户需求，我们可以通过用户调研这种偏用户主观的方式进行获取，并结合后台数据——用户真实行为数据进行验证，来确定用户的需求。
以浏览器首页为例，我们通过问卷调研，这种定量的调研方式，了解用户主观上挑选浏览器的驱动因素，其中代表功能需求的依次是：搜索、网页浏览、信息流、视频、小说（不同页面调研的问题需要有针对性的设计，首页作为产品的初始界面，可以以APP的整体的选择驱动为参考）。
图3主观和客观的用户需求
再看看后台客观数据——浏览器首页的功能转化率数据，从高到低依次是：信息流、搜索、名站、提示、天气、二楼小程序。
对比主客观数据，如果数据一致，说明产品设计大概率是符合用户心智模型和业务预期的。如果主观和客观数据有偏差，一方面要审视产品设计是否有问题导致用户转化率低，另一方面也要挖掘是否用户言行有偏差导致预期数据虚高。
结合浏览器的这个案例，大家可以先想一想，二者的数据差异（用户认为搜索是核心驱动，但实际信息流的日活更高）代表什么呢？
我的理解是：用户使用浏览器的核心驱动是搜索+网页浏览体验，结合福格行为模型B=MAP。
用户使用浏览器的搜索动机M非常强，搜索功能和网页体验是浏览器的核心基础，很容易形成用户心智（主观认知），所以必须在产品设计上加以强化和优化，以稳固用户使用浏览器的核心驱动心智。
其次，信息流虽然在用户认知中排名相对靠后，但却是转化最高的功能，说明信息流的触发性P极强（本来无主动诉求（动机），因提示而激发）加上对用户能力要求A极低，所以就形成了非常高的转化率数据（但有可能并未进入用户的心智）。
所以在保障搜索体验的前提下，要尽可能地提升信息流的展示空间和内容吸引力，提升信息流的使用心智，进而给业务带来更多的收益。
二、业务目标浏览器作为vivo手机上最重要的一个互联网产品之一，其核心的业务目标就是盈利，通过提供优质的搜索+内容服务，带来更高的日活和时长（广告收益），助力vivo手机业务的发展。
为了便于理解，我就将浏览器的业务目标实现简单的以搜索和信息流来达成，回到我们之前的目标拆解公式：
图4业务目标的拆解
总目标=目标1(A1*X1%)+目标2(A2*X2%)+……+目标N(An*Xn%)
我们可以这么简单拆解（数值非真实，仅作案例参考）：
浏览器总营收=浏览器日活1亿*搜索点击50%*搜索完成90%*1元广告收益*2次人均搜索+浏览器日活1亿*信息流转化60%*0.1元信息流广告/10分*40分钟。
从中可以看出，作为设计师，我们可以发力的主要集中在搜索/信息流入口的转化率、搜索的完成率以及信息流的连续消费上，在后续界面及流程设计中，我们可以围绕这几点展开设计。
三、媒介属性在任何媒介上设计产品，我们都需要了解媒介的硬件和软件特性。因为媒介的形态和可供性会影响并塑造人们的认知和行为。
图5不同媒介的形态
比如电视、电脑、平板和手机，硬件不同，人们与之交互的方式也大相径庭。
电视：大屏幕（32~86英寸），距离远（2.5~5米），多用遥控器交互；电脑：中型屏幕（13~38英寸），距离中（50~70厘米），多用键鼠交互；平板：中小屏幕（8~12英寸），距离较近（40~60厘米），多用手势交互；手机：小屏幕（4~7英寸），距离近（32~50厘米），多用拇指交互。今天我们就重点以手机为例，为大家讲讲手机媒介的特性和拇指交互的特点。
2013年，Steven Hoober和其他一些研究员，对人们在街上、机场、公共汽车站、咖啡馆、火车和公共汽车上使用移动设备进行了 1,333 次观察。发现当人们在手机上进行操作时：
图6有操作时的3种持机手势
有49%的情况是单手操作，有36%的情况是一手持机，另一只手的拇指或食指进行操作，有15%的情况是双手持机并双手操作。综合来看，人们用拇指交互的比例达到了75%（49%+26%），所以我们日常的互动操作的布局及热区设计，需要尽可能的满足拇指的可操作范围和精度范围。
我们具体看一下不同持机手势的操作热区分布：
图7不同持机手势的操作热区
从中可以看出，单手持机的交互盲区相比双手持机会更加显著。再进一步，我们来看一下单手持机时，左右手持机交互热区的分布：
图8不同持机手势的操作热区
给大家补充一个容易犯错的知识点：在生活中，右利手的用户占比约87%，但调研中偏向于右手持机并操作的用户仅占28%。
图9左右手习惯调研
调研给出的原因是，多数用户会选择左手持机，以便让灵活的右手做更复杂的操作，比如吃饭等。其次是因为多数人是以左眼为主视眼的，左手持握会更方便左眼看手机。
坦白讲，我对这个数据是有些质疑的，但不管左手持机会不会翻转，都提示我们设计师：要兼顾用户左右手持机的习惯设计去设计页面框架，尽可能保证用户高频操作处于绿色热区内。
给大家举个视频的例子：
图10左右持机操作按钮布局变化
夸克视频检测到用户不同手持机时，会改变中间常用功能的位置：右手持机按钮在右侧，左手持机按钮在左侧，以方便拇指操作。
再回到OS系统特性，我们需要了解ios和android的布局规范，去顺应不同系统下的界面框架布局：
图11 不同系统的页面框架
这个之前在《ios人际界面指南》和《Material Design 3》中讲得比较多，这里就不再赘述，感兴趣的小伙伴可以查看（现在ios和material design上的界面框架布局已趋于一致，大家可灵活使用）。
基于OS的系统框架，我建议采用标准组件布局时，尽量使用其标准位置（可以与硬件的布局及热区相匹配），把更多精力聚焦在内容区，去思考用户需求和业务目标的内容框架布局，这方面竞品设计可以给我们一些参考。
四、竞品设计从平台特性中吸取平台系统的产品设计框架，再从竞品中了解竞品内容区的设计框架，可以帮助我们初步构建好界面框架。以浏览器为例，我们选择了几大厂商和3个头部的第三方浏览器作为参考：
图12浏览器核心竞品页面
我们把这几个产品的框架进行梳理可以得到下图：
图13浏览器核心竞品页面框架
由此可以归纳出主流竞品的页面框架从上到下依次是：天气+运营位、搜索框、名站、信息流、导航栏。这是宏观的功能框架布局。如果我们的需求里包含的就是这几大模块，那可以延续这几大模块的布局顺序。
那进入到微观层面，明确每一个模块对用户的意义，对业务的价值，这里一定更要结合第一二步的分析结论，帮助我们判断：每一个模块在首页中应该占据什么样的位置，起到什么样的作用，应该占用多大的视觉空间，多强的视觉焦点。
以vivo浏览器的首页设计为例：最核心的功能是搜索+信息流，所以需要保证搜索功能的可见性（位置延续搜索框的顶部一致性认知）和操作的便捷性（适当往下且增加搜索栏的高度），并尽可能为为信息流腾出更多的展示空间（缩减名站的个数和高度，强化信息流的视觉样式）。
PS：因为浏览器新版首页还未上线，所以暂时就不给大家展示新设计了。希望通过这个案例，可以让大家对如何进行界面框架设计有清楚的认识。
#专栏作家#悦有所思，人人都是产品经理专栏作家。10年体验设计经验，崇尚理论指导实践，实践迭代理论，热衷于学习、解构、建构、传播交互设计、服务设计、行为设计等设计相关领域知识。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
登录页面设计是网站用户体验流程的关键部分。好的设计有助于推动访问者访问你的网站，并把新用户进行转化。它也给返回用户一个简单的方式登录到您的网站。
以下案例中我们将提供：当你设计你的登录界面的时候，你应该做什么和不应该做什么。不是所有的提示和例子都适用于你的产品。关键是选择最适合你的。
技巧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协议