用户体验要素：何为框架层，何为表现层？

Posted 2023-05-10

参考技术A 在充满概念的结构层中，其实是形成了大量的需求，这些需求都是来自我们的战略目标的需求。

在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能让晦涩的结构变得更实在。

结构层界定了我们的产品将用什么方式来运作；框架层则用于确定用什么样的功能和形式来实现。

在结构层，我们看到一个较大的架构和交互的设计；在框架层，我们的关注点几乎全部在独立的组件以及它们之间的相互关系上。

框架层，很容易理解。用我们现在画的原型图来解释一下， 就是首页的各个按钮，都放哪里。第二页的功能按钮，都放哪里。

对于功能型产品，我们通过界面设计（interface design）来确定框架—一个大家所熟知的、“按钮、输入框和其他界面控件”的领域。

但是对于信息型产品，要解决的是一个独一无二的问题：导航设计（navigation design），这是专门用于呈现信息的一种界面形式。

最后，信息设计（information design）是功能和信息两方面都必须要做的，它用于呈现有效的信息沟通。

如果这涉及提供给用户做某些事的能力，则属于“界面设计”。界面的意思是说，通过它，用户能真正接触到那些“在结构层的交互设计中”确定的“具体功能”。

如果是传达想法给用户的话，那就是“信息设计”。信息设计是这个层面中范围最广的一个要素，所涉及的事情几乎是到目前为止我们在功能型和信息型产品两者都看到过的全部内容。

信息设计跨越了“以任务为导向”的功能型产品和“以信息为导向”的信息型产品的边界，因为无论是界面设计还是导航设计，都不可能在没有“一个良好的信息设计的支持”的前提下取得成功。

一般在这种设计的时候，要照顾到两个用户层面的特性，习惯和比喻。

习惯，就是设计不应该违背用户的使用习惯。而比喻则是，我们可以用很多的设计来比喻现实中的事情，比如购物车就用了一个小框表示。🛒

界面设计要做的全部事情就是选择正确的界面元素。哪个功能要在哪个界面上完成，是我们在结构层的交互设计中已经决定的；而这些功能在界面上如何被用户认知到，则属于界面设计的范畴。

界面设计里，提供了很多方法，复选框、下拉菜单等等，这些都是在设计网页或APP时候，使用到的元件。

任何一个网站的导航设计都必须同时完成以下三个目标： 

首先，它必须提供给用户一种在网站间跳转的方法。

其次，导航设计必须传达出这些元素和它们所包含内容之间的关系。

第三，导航设计必须传达出它的内容和用户当前浏览页面之间的关系。

导航一般有以下几种，全局导航、局部导航、辅助导航、上下文导航、友好导航、远程导航、网站地图和索引表。

由于界面不仅仅只是用来收集用户的信息，它还需要向用户呈现信息，所以信息设计在解决界面设计的问题中扮演了重要角色。系统应该给用户提供能正确使用系统的信息（无论是用户出现了错误还是刚刚开始使用），这些都是信息设计的工作范畴。

将信息设计和导航设计结合到一起，有一个重要的作用：支持指示标识（wayfinding），这是用来帮助用户理解“他们在哪”以及“他们能去哪”的系统。

页面布局是将信息设计、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。

线框图是整合在结构层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。把这三者放到一个文档中，线框图就可以确定一个建立在基本概念结构上的架构，同时指出了表现层的设计应该前进的方向。

而这个东西，实际上就是我们今天所说的低保真原型图。

这里，内容、功能和美学汇集到一起来产生一个最终设计，完成其他四个层面的所有目标，并同时满足用户的感官感受。

在框架层，我们主要解决放置的事情。界面设计考虑可交互元素的布局，导航设计考虑在产品中引导用户移动的元素的安排，而信息设计考虑传达给用户的信息要素的排布。

而表现层，则是要解决并弥补“产品框架层的逻辑排布”的感知呈现问题。举个例子来说，通过关注信息设计，我们决定了这些信息元素应该如何分组和排列；通过关注视觉设计，我们决定这种安排在视觉上应该如何呈现。

决定我们的设计最后要如何被人类的感觉器官感受到。这些感受由五个方面组成：视觉、听觉、触觉、嗅觉和味觉。哪些感受将被纳入设计是由我们的产品类型决定的。

由于我们互联网产品，主要是视觉上的。这也是用户体验设计师最得心应手的领域。

因为几乎所有的互联网上的产品都会涉及视觉设计。出于这个原因，这本书，主要就讲的是视觉设计如何支持用户体验的。

评估一个产品视觉设计的简单方法之一，是提出这样的问题：你的视线首先落在什么地方？哪个设计要素在第一时间吸引了用户的注意力？它们是对于战略目标来讲很重要的东西吗？或者用户第一时间注意到的东西与他们的（或你的）目标是背道而驰的吗？

有人会使用眼球追踪来看用户在看什么，也就是眼动仪。但在手机时代，不管用了。

如果你的设计是成功的，用户眼睛的移动轨迹的模式应该有以下两个重要的特点：

首先，它们遵循的是一条流畅的路径。

其次，在不需要用太多细节来吓倒用户的前提下，它为用户提供有效选择的、某种可能的“引导”。

当一个元素在设计中的显得与众不同时，用户就会注意到。这就是对比。

而我们整体页面的设计风格、元件使用、文案设计等，是否一致，这个说的就是一致性，它能使你的设计有效地传达信息，而不会导致用户迷惑或焦虑。

基于栅格线（grid-based layout）的布局是来自平面设计的一种技术，是一种对网页也同样有效的技术。这个方法通过使用“母版”来确保设计的一致性，各种布局都是根据这个模板来创建的。

一般在Axure里面，会有一个小控件8px 16px这种，这就是基于栅格线设计的。

内部一致性的问题。这是说，在产品的两个不同的地方反映了不同的设计方法。

 外部一致性的问题。这是说，这个产品没有在同一个企业的其他产品中，反映出被使用的、相同的设计方法。

最后，在表现层，最让人直观感受的，就是配色和排版了。这也是用户最直接感受到的。颜色是什么，排版怎么样。视觉第一个感知的就是这两个了。

当我们采用以上的方法，或者原则做完工作之后，最后，要做的是，形成视觉模型和风格指南。比如蚂蚁金服做的那套广为流传的设计。这个可以称之为互联网设计界的典范。

有了风格指南，设计就有了一套唯一且高效的方法，让我们的产品看起来是一个协调一致的整体，而不是一堆乱七八糟的碎片。

书里面介绍了它的方法。总结一下，我的理解，实际上这五层，就是我们很多产品经理做事的工作流程。

战略层，确定产品目标和用户需求，这是PM设计产品的来源。也是做一个产品的开端。

范围层，当我们获取到用户需求、明确好产品目标后，PM就会想，我们可以提供给用户什么解决方案，来实现用户的需求。这时候，我们会写需求文档，记录下我们提供的解决方案。

当文档完成后，PM会兼职做UE的工作，也可以找UE一起来做。开始进入了结构层的设计。这些解决方案，要做几个页面，在哪个页面呈现。

然后UE就去设计去了，这个东西用按钮表示，这个东西用文本框表示，按钮放在这里，表示可以点击，可以确认，文本框放在那里，用户一眼能看到说明等等。这都是UE的工作。而这就是框架层的工作。

我们一个产品交付给用户，去掉开发的工作之后，这五层，实际上，就是PM在把一个用户需求，或者一个点子，变成最终产品，交付给用户使用的一套流程。每一层，都涉及到各种决策，我们做什么，不做什么。用什么元件，不用什么元件。什么位置，什么颜色。

每一个流程上的每一个决策，最终，交付到用户那里，当用户使用一次之后，产生用户体验。

如何为 geoJson 图层设置 zIndex 图层顺序？

【中文标题】如何为 geoJson 图层设置 zIndex 图层顺序？

【英文标题】：How to set the zIndex layer order for geoJson layers?

【发布时间】：2017-02-07 14:44:13

【问题描述】：

我希望某些图层始终位于其他图层之上，无论它们以何种顺序添加到地图中。 我知道bringToFront()，但它不符合我的要求。我想根据属性动态设置 zIndex。

Leaflet 有 setZIndex() 方法，但这显然不适用于 geoJson 层： https://jsfiddle.net/jw2srhwn/

有什么想法吗？

【参考方案1】：

对于矢量几何图形无法做到这一点。

zIndex 是 HTMLElements 的属性，矢量几何图形（线和多边形）被渲染为 SVG 元素，或以编程方式渲染为 <canvas> 绘制调用。这两种方法没有zIndex 的概念，所以唯一有效的是将元素推到SVG 组的顶部（或底部）或<canvas> 绘制序列。

另外，提醒L.GeoJSON 只是L.LayerGroup 的一种特定类型，在您的情况下包含L.Polygon 的实例。此外，如果您阅读Leaflet's documentation about the setZIndex() method on L.LayerGroup：

在该组中包含的每一层上调用 setZIndex，传递 z-index。

那么，L.Polygons 有 setZIndex() 方法吗？不，所以在他们的包含组中调用它没有任何作用。不过，它将对该组中包含的任何L.GridLayers 产生影响。

回到你的问题：

我希望某些图层始终位于其他图层之上，无论它们以何种顺序添加到地图中。

看起来您正在寻找的东西是地图窗格。请阅读map panes tutorial。

【参考方案2】：

这是在 Leaflet 1.0（与 0.x 版本相比）中实现用户定义的“窗格”的原因之一。

创建panes:var myPane = map.createPane("myPaneName") 如有必要，设置窗格元素的类/z-index：myPane.style.zIndex = 450（参考z-index values of built-in panes） 创建图层时，指定其目标pane 选项：L.rectangle(corners, pane: "myPaneName" ) 通过L.geoJSON 工厂构建时，您可以使用onEachFeature 选项循环遍历您的功能，以克隆具有指定目标pane 的层。

演示：https://jsfiddle.net/3v7hd2vx/90/

【参考方案3】：

对于搜索 Z-Index 的人

所有路径图层（除了标记之外的所有图层）都没有 z-index，因为 svg 图层具有固定顺序。首先绘制第一个元素。所以最后一个元素被画在上面。 @IvanSanchez 很好地描述了 zIndex 不起作用的原因。

您可以使用layer.bringToBack() 或layer.bringToFront() 控制订单。

使用该代码，您有更多选项来控制层的顺序。

L.Path.include(
    getZIndex: function() 
        var node = this._path;
        var index = 0;
        while ( (node = node.previousElementSibling) ) 
            index++;
        
        return index;
    ,
    setZIndex: function(idx) 
        var obj1 = this._path;
        var parent = obj1.parentNode;
        if(parent.childNodes.length < idx)
            idx = parent.childNodes.length-1;
        
        var obj2 = parent.childNodes[idx];
        if(obj2 === undefined || obj2 === null)
            return;
        
        var next2 = obj2.nextSibling;
        if (next2 === obj1) 
            parent.insertBefore(obj1, obj2);
         else 
            parent.insertBefore(obj2, obj1);
            if (next2) 
                parent.insertBefore(obj1, next2);
             else 
                parent.appendChild(obj1);
            
        
    ,
    oneUp: function()
        this.setZIndex(this.getZIndex()+1)
    ,
    oneDown: function()
        this.setZIndex(this.getZIndex()-1)
    
);

然后就可以调用了

polygon.oneUp() polygon.oneDown() polygon.setZIndex(2) polygon.getZIndex() 现在layergroup.setZIndex(2) 正在工作