编辑导语:如何理解和构建界面设计框架？产品设计师在构建界面设计框架时，不仅需要考虑用户需求和用户体验，还需要考虑有竞争力的产品设计和媒体属性。在这篇文章中，作者总结了构建界面设计框架的几个方面。让我们看一看。

在讲了需求分析、设计策略、信息架构等概念之后。，交互设计的可视化产品:界面框架最终达成。那个界面的框架是怎么设计的？我们可以从四个维度寻找答案:

图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 cm)，多用途鼠标键盘交互；平板:中小尺寸屏幕(8~12寸)，近距离(40~60 cm)，多用途手势交互；***:小屏幕(4~7寸)，近距离(32~50 cm)，多用途拇指交互。

今天我们就重点以定位器为例，给大家讲讲定位器媒体和拇指交互的特点。

2013年，史蒂文·胡伯和其他一些研究人员对人们在街道、机场、公交车站、咖啡馆、火车和公交车上使用移动设备进行了1333次观察。当人们被发现使用***时:

图6操作过程中的三种手势

49%的病例是单手操作，36%的病例是单手操作，另一只手的拇指或食指操作，15%的病例是双手操作。整体来看，拇指交互的人群比例已经达到了75%(49%+26%)，所以我们日常交互操作的布局，热区的设计，都需要尽可能的满足拇指的操作范围和精度范围。

我们来具体看看不同握持手势的操作热点分布情况:

图7不同握持姿势的操作热区

可以看出，单手持机的交互盲区比双手手持机更明显。此外，让我们来看看在使用单个手持设备时，左右手持设备的交互热区的分布:

图8不同握持姿势的操作热区

给大家补充一个容易出错的知识点:生活中，惯用右手的用户约占87%，但调查中只有28%的用户更喜欢用右手握持和操作机器。

图9左右手习惯调查

调查给出的原因是，大部分用户会选择左手持机，让灵活的右手做更复杂的操作，比如吃饭。其次，因为大部分人的注意力都在左眼上，所以用左手握着会让左眼更容易看定位器。

坦白说，我对这个数据有些怀疑，但不管左手是否把握住机会，它都提示我们设计师:设计页面框架要兼顾用户左右手持机的习惯设计，尽量保证用户的高频操作在绿色热区。

我举个视频例子:

图10左右夹持机操作按钮布局变化

当Quark检测到用户的不同听筒时，会在中间改变常用功能的位置:右手听筒按键在右侧，左手听筒按键在左侧，方便拇指操作。

回到OS系统特性，我们需要了解ios和android的布局规范，以符合不同系统下的界面框架布局:

图11不同系统的页面框架

这个在之前的ios人际界面和材质设计3指南中已经讲的比较多了，这里就不赘述了。有兴趣的朋友可以去看看(现在ios上的界面框架布局和材质设计已经趋于一致，可以灵活使用)。

基于OS系统框架，我建议在采用标准组件布局的时候，尽量利用其标准位置(可以匹配硬件布局和热区)，将更多的精力放在内容领域，思考用户需求和业务目标的内容框架布局。在这方面，竞品的设计可以给我们一些参考。

第四，竞品的设计

从平台的特点中吸取平台系统的产品设计框架，再从竞品中了解竞品内容区的设计框架，可以帮助我们初步构建界面框架。以浏览器为例，我们选取了几大厂商和三个头部为参考的第三方浏览器:

图12浏览器核心竞争产品页面

通过梳理这些产品的框架，我们可以得到下图:

图13浏览器核心竞争页面框架

由此可以得出，主流竞品的页面框架从上到下依次是:天气+操作位、搜索框、名站、信息流、导航栏。这是宏观的功能框架布局。如果这些模块包含在我们的需求中，我们可以继续这些模块的布局顺序。

然后到微观层面，明确每个模块对用户的意义，对商业的价值。这里一定要结合第一步和第二步的分析结论来帮助我们判断:每个模块在首页应该占据什么样的位置和作用，应该占据多大的视觉空间空，视觉焦点有多强。

以vivo浏览器的首页设计为例:核心功能是搜索+信息流，所以要保证搜索功能的可视性(位置延续搜索框顶部一致性的识别)和操作的便捷性(适当向下并增加搜索栏的高度)，尽可能多的为信息流做展示空的房间(减少名站数量和高度，加强信息流的视觉风格)。

PS:因为浏览器新首页还没上线，所以暂时不给大家看新设计。希望通过这个案例，让大家对如何设计界面框架有一个清晰的认识。

#专栏作家#

人人都是产品经理专栏作家。10年体验式设计经验，崇尚理论指导实践，践行迭代理论，热衷于交互设计、服务设计、行为设计等设计相关领域知识的学习、解构、建构和传播。

本文由人人作为产品经理原创发布，未经允许禁止转载。

题目来自Unsplash，基于CC0协议。