| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
Eloisa8912
8年前发布

淘宝新UI需求分析篇 - “四核”驱动的“三维”导航

   <h2>前言</h2>    <p>孔子说:"软件是对客观世界的抽象"。</p>    <p>首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而发明创造的导航逻辑。说这是发明创造,也不是危言耸听,因为它完全突破了传统意义的页面导航概念,看完了本博客以后,相信会让你脑洞大开。当然这也是一种尝试,只有UWP的出现才会带来这种机遇,希望广大开发者给予指正。</p>    <p>上周发布了淘宝UWP的更新,地址在这里:<a href="/misc/goto?guid=4959671622878870256">https://www.microsoft.com/zh-cn/store/apps/%e6%b7%98%e5%ae%9d/9nblggh6c2cd</a></p>    <p>以前淘宝UWP的mobile版叫“手机淘宝”,desktop版叫“淘宝HD”。上周把silverlight版的半残“淘宝”下线了,把“淘宝”这个应用名称拿回来了,现在终于把二者统一为“淘宝”了。</p>    <p>随着UWP的诞生,一个App应该既可以在狭小的手机屏幕上运行,也可以在手持式平板电脑上运行,甚至可以在宽大的桌面电脑屏幕上运行。而对我们程序员来说,这才是真正的挑战。Windows 10,一统天下的宏伟计划确实给操作系统本身的设计带来了巨大的挑战,同时也给UWP应用的开发带来同样大的困难,因为它要求你的App可以运行在所有运行Windows 10的硬件上,而这些硬件有着截然不同的屏幕尺寸,从Band,到手机,到平板,到桌面电脑,到Hub。但从另外一个方面看,统一的操作系统和UWP却给用户带来了统一的体验,给整个产业带来了同样巨大的利益。</p>    <p>扯远了……</p>    <h2>一维Z轴导航模式</h2>    <p>首先看看手机上运行的App采用的导航模式:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/d6a58cf84f67fb344048de08d4eb1c38.png" width="222" height="296"></p>    <p> </p>    <p>这是最简单的导航模式了,从数据结构上看,是一个简单的堆栈。A是起始页面;在A上点击个按钮,进入B页面;在B上点击个图片,又进入C页面。按back键从C回到B,再按就回到A。</p>    <p>以下是淘宝UWP中,在手机屏幕上运行时的情况。</p>    <p>首先进入主页A,然后点击了"淘抢购"频道,进入淘抢购的列表页B,然后在B中点击了一个列表项,进入该商品的详情页面C。</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/4a211d83997efb077d3be7123e0e0aab.png" width="554" height="264"></p>    <p>手机屏幕有限,一次只能看一个页面,当用户想看其它商品信息时,必须先返回到B页,然后再选择另外一个条目。</p>    <p>在UWP中,导航必须在Frame类上实现,下面代码中所示的BackStack,是Frame类中的一个属性,专门用于保存导航历史记录:</p>    <p> </p>    <pre>  <code class="language-java">//  // Summary:  // Gets a collection of PageStackEntry instances representing the backward navigation  // history of the Frame.  //  // Returns:  // The backward navigation stack.  public IList<PageStackEntry> BackStack { get; } </code></pre>    <p> </p>    <p>当用户按了back键时,你就可以简单地用Frame.GoBack()方法来返回到上一页了。</p>    <p>在Z轴导航模式中,我们使用App.xaml.cs里创建的Frame来做所有页面的导航容器。</p>    <p> </p>    <pre>  <code class="language-java">Frame rootFrame = new Frame();  Window.Current.Content = rootFrame;  rootFrame.Navigate(typeof(PageA));</code></pre>    <p>调用Frame.Navigate(typeof(PageA))时,会把Page A作为该Frame的Content,同时,这个Frame的值会传送到Page A的Frame属性中,两者是一回事儿,是为了方便再次Navigation时使用。比如this.Frame.Navigate(typeof(PageB)),这里的this实际上是Page A的实例,而this.Frame就是App.xaml.cs里创建的rootFrame。</p>    <p>Z轴导航的实际UWP的例子很多,如网易云音乐。Windows Store应用商店App是另外一个例子,它的内容也是可扩展的,就是说在窄屏上,可以一行列出4个项目,在宽屏上可以根据屏幕宽度列出5~8个项目。还有一个例子就是著名的必应词典Win10版啦,也是用了一个Frame搞定所有事情。</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/b3c16d2c0fd3d9dc5ebc49375e7913f9.png" width="576" height="432"></p>    <p>用这种模式最忌讳的事情是: 当应用场景稍微复杂一些时,也就是页面较多(8个以上),有可能产生交叉跳转,可能会造成用户迷失;而在code方面,造成后退栈越来越大,不过这还是小事情。只要单个Frame的导航能满足你的应用场景就可以。</p>    <p>举例来说,如果我在必应词典里的背单词模块中,想查一个词,但不想跳转到search页,而是想在屏幕右侧滑出一个区域来显示该单词的词典解释,那就需要两个Frame来完成这个要求了。</p>    <p>不同的导航模式,对界面设计的要求是不同的,这一点请designer注意。在Z轴单页模式中,只需要专注每个页面的设计即可。但在后面的复杂导航模式中,只这样做就不够了。</p>    <h2>一维Master/Detail导航模式</h2>    <p>在宽大的桌面电脑屏幕上,上面那种在手机的窄屏界面的展示方式是不可接受的。如下图的Windows 10中的设置页面,它的窗口是可缩放的,可宽可窄,随心所欲。在窄窗口中,显示一页的内容;在宽窗口中,side by side地显示两页的内容,合理利用屏幕空间,同时简化了用户的操作: 用户可以在右图中的左侧列表控件中任意点击感兴趣的条目,在右侧可以立刻得到响应;但是在左图中,用户点击了Display,进入详情页,必须点back键回到列表框,才能再进入另外一个条目。</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/753cc8b18d697c959a9b923808e86ddc.png" width="193" height="234"> <img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/be1b6000b9c17e8a3e167a9066a395d5.png" width="322" height="234"></p>    <p> </p>    <p>我们再来看看ITHome - IT之家UWP的界面:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/629e42da6dda191b6d1b5f7abaa8ec1a.png" width="573" height="389"></p>    <p>整个屏幕分成三列,最左侧的窄条Vertical Menu Bar,中间偏左部分的资讯列表,右半部份的资讯详情。可以说这是一个标准的宽屏设计模式,易于理解,易于操作,适合推广使用。</p>    <p>它对应的XAML应该是这个样子:</p>    <p> </p>    <pre>  <code class="language-xml"> 1 <Grid Background="{ThemeResource WhiteColorBrush}">   2     <Grid.ColumnDefinitions>   3         <!--vertical menu bar-->   4         <ColumnDefinition Width="48" x:Name="menuCol"/>   5         <!--list page container-->   6         <ColumnDefinition Width="2*" x:Name="leftCol" MinWidth="360"/>   7         <!--detail page container-->   8         <ColumnDefinition Width="3*" x:Name="middleCol"/>   9     </Grid.ColumnDefinitions>  10   11     <common:VerticalMenuBarControl x:Name="menuBar" Grid.Column="0"/>  12   13     <!--list content in this frame-->  14     <Frame x:Name="leftFrame" Grid.Column="1"/>  15   16     <!--detail content in this frame-->  17     <Frame x:Name="rightFrame" Grid.Column="2"/>  18 </Grid> </code></pre>    <p> </p>    <p>Column-0的宽度为48 epx (effective pixel),在点击了上方的汉堡控件展开菜单后,这个宽度可以调整为120左右。</p>    <p>Column-1和Column-2的常规比例为2:3,但是当窗口太窄时,Column-1的宽度有个限制MinWidth="360",避免里面的内容无法以合理方式展示。当然也可以设置一个MaxWidth="720",避免太宽时横向拉伸太难看。</p>    <p>关于epx的概念,请看这里:<a href="/misc/goto?guid=4959671622975973550">https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro</a> 。改天把这篇东西翻成中文给大家洗洗脑吧。</p>    <p>这种设计适合于简单的二级内容应用场景,想看三级片是不行的了。现在市面上大多数的UWP,都可以用这种方式来实现,如微博UWP就是另外一个典型。</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/39b5c2a729b2fe7fd6acf749b1be3b26.png" width="576" height="383"></p>    <p>如果这样做的话,是否能让mobile和desktop两个device使用同一套UI代码呢?当然可以,否则就不能叫做UWP了,只是需要我们多做一点点事情而已。具体需要做什么事情,我们在另外一篇博客中(关于Win10 Mobile Continuum的使用方式)会详细说明。</p>    <h2>二维(Z+X)导航模式</h2>    <p>用上述的master/detail模式,虽然可以充分利用屏幕,但是只适合于场景较为简单的应用,如新闻类,阅读类。下面我们看一下稍微复杂一些的应用,比如旺信UWP。先看看截图获得感性认识:</p>    <p>聊天主页,左侧展示好友列表:</p>    <p> <img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/d39404a6e5032231b128a31dd42ed10d.jpg" width="936" height="488"></p>    <p>右侧窗口为具体聊天页:</p>    <p> <img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/169be195c61e0376331ea2aa49166654.jpg" width="935" height="488"></p>    <p>最右侧的浮出窗口为辅助的设置页面,基本是popup类型的信息:</p>    <p> <img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/82c6c6641e46cdbe7151a32c16f8e289.jpg" width="936" height="488"></p>    <p>它的主控页的XAML是这样写的:</p>    <p> </p>    <pre>  <code class="language-xml"><Grid Background="{ThemeResource WXWhiteColorBrush}">      <Grid.ColumnDefinitions>          <!--vertical menu bar-->          <ColumnDefinition Width="48" x:Name="menuCol"/>          <!--list page container-->          <ColumnDefinition Width="2*" x:Name="leftCol" MinWidth="360"/>          <!--detail page container-->          <ColumnDefinition Width="3*" x:Name="middleCol"/>      </Grid.ColumnDefinitions>      <!--left side vertical menu bar-->      <common:VerticalMenuBarControl x:Name="menuBar" Grid.Column="0"/>        <!--list content in this frame-->      <Frame x:Name="leftFrame" Grid.Column="1"/>        <!--detail content in this frame-->      <Frame x:Name="middleFrame" Grid.Column="2"/>        <!--popup content in this frame-->      <Grid x:Name="rightFrameGrid" Grid.Column="0" Grid.ColumnSpan="3">          <Grid.ColumnDefinitions>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="500" x:Name="rightCol"/>          </Grid.ColumnDefinitions>          <Rectangle Grid.Column="0" Fill="Black" Opacity="0.5"/>          <Frame x:Name="rightFrame" Grid.Column="1"/>      </Grid>  </Grid> </code></pre>    <p> </p>    <ul>     <li>最左侧的是vertical menu bar</li>     <li>第二列是leftFrame,用于显示主要Scenario的主页面</li>     <li>第三列是middleFrame,用于显示每个Scenario的详细页</li>     <li>最右侧是rightFrame,用一个grid承载。这个grid用于遮盖后面的menu bar, left Frame, middle Frame,形成性感的半透明遮罩效果;right Frame用于配置页面的展示。</li>    </ul>    <p>在旺信UWP中,我们使用了三个Frame做navigation。在子模块开发前,就实现了一个导航framework,使得每个业务模块的开发者只需要完成自己的页面开发,然后直接调用该framework提供的导航方法即可。</p>    <p>当然,这里的导航不再是this.Frame.Navigate()那么简单,但是也没复杂到哪里去,也就是多加了一个参数而已,叫做that.Nav.To(page, left|middle|right),由后面那个参数指定你将要展示的页面在哪个frame里出现。这样做的基本条件是,做好需求分析,仔细梳理页面之间的逻辑关系,使得每个页面都在一个预订的frame里展示。</p>    <p>旺信的导航逻辑可以抽象成这个样子:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/a9aac51c709f93428c242c76afd4d098.png" width="555" height="242"></p>    <p>具体是这样运行的:</p>    <ol>     <li>用户登录旺信后,首先展示的是联系人页面,命名为A1;</li>     <li>用户分别和三个联系人聊天,会使用X轴导航方式,在右侧依次展示三个聊天页面,A2/A2'/A2";在Middle Frame中,用了Z轴导航,承载三个页面。</li>     <li>用户在A2时做了两次配置修改,使用X轴导航方式,依次出现了A3/A3'两个页面;在Right Frame中,用Z轴导航承载两个页面。</li>    </ol>    <p> 所以,此应用的导航是X+Z的二维模式。这种模式要求interactive designer对该应用的业务非常熟悉,上下文处理得很流畅,否则会有跳跃感。而对于user experience designer,更多地要考虑两个页面之间的差别和联系,和单页设计的感觉完全不同,两个页面既不能长得完全不同(因为有上下文关系),又不能看着差不多,以为是让用户玩“找出不同处”的游戏,因为有上下级关系。</p>    <h2>淘宝UWP的应用场景分析</h2>    <p>迄今为止,我们遇到的最复杂的UWP就是淘宝了。打桥牌的人知道,桥牌是叫牌难,打牌难,计分难,发牌好像最简单;淘宝是设计难,实现难,测试难,使用起来可是随心所欲。</p>    <p>下面我们先来看一个常见的用户购物行为:</p>    <ol>     <li>打开淘宝首页,点击淘抢购</li>     <li>进入淘抢购,点击一个水果商品</li>     <li>进入详情页,点击店铺按钮</li>     <li>进入该水果的店铺,点击了另一个水果</li>     <li>再次进入详情,加入购物车,然后从超级按钮跳转按钮中进入购物车</li>     <li>在购物车中忽然看到了一件以前收入的衣服,还没下单,于是点击立即购买按钮</li>     <li>进入订单页,发现送货地址应该修改一下,点击了地址控件</li>     <li>进入地址选择页,发现没有自己想要的地址,于是点击地址管理按钮</li>     <li>进入地址管理页,添加好了新地址,想看看以前的订单的送货地址有没有搞对</li>     <li>进入我的淘宝,点击我的订单按钮</li>     <li>进入订单管理,增加了一个新的发货地址</li>     <li>后面一系列折腾,整个购物过程经过了50多次页面跳转,历时1小时……</li>    </ol>    <p>琳琅满目的商品,让人流连忘返,迷失于虚拟的货架之间。但是作为UWP开发者,我们不能迷失,要理智,理智,理智……老板,那个快递费能不能便宜些,再送一个赠品……回归理智!</p>    <p>之所以有超级跳转按钮的设计,是因为你不可能让用户back无数次后才能找到购物车页面,就好像在超市里你必须推着一个购物车,可以随时放置商品,并且可以有无数通道通向收银台一样。</p>    <p>下图演示了这次购物行为的页面跳转过程(篇幅有限,图片较模糊,见谅):</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/6d40db64963a2fa59aa3cc31150df9f9.png" width="480" height="861"></p>    <p>让我们来仔细分析一下这个常见的购物行为。</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/69ad21a418f0fb9727ef0e4d8b1763a5.png" width="395" height="435"></p>    <p>第一眼看上去,我丂!页面是可以乱跳的!根本不是普通的App那样的进栈出栈的规矩,看上去像是一种网状关系。再仔细看看!怎么好像"详情"页出现了很多次呢?</p>    <p>在网购中,详情是购物的关键环节,图片,价格,评价,快递,等等,它可以很大程度决定是否立刻剁手。</p>    <p>怀着剁手党的激动心情,我们把详情用蓝色标记一下,变成如下图:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/716027a9739cfb8cc85489c46426b406.png" width="454" height="493"></p>    <p>都可以从哪些地方进入详情页呢?顺藤摸瓜找上游业务链,那就是淘抢购,购物车,店铺。还有很多其他页面可以进入详情,篇幅有限,不一一列出,比如天猫,聚划算等等。</p>    <p>于是乎,我们把详情的上游业务标记成橙色的,如下图所示:</p>    <p>这里要注意,店铺虽然在下图中,处于详情的下游,但是从真实场景看,店铺的概念显然是大于详情的概念的,所以它实际是详情的上游。那个链接只是系统提供的一种方便的跳转而已。</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/14f8db0c0ff874f4fc900b356fb456d4.png" width="454" height="522"></p>    <p>我们还可以继续刚才的思路,看看更远端的上游和下游是什么?</p>    <p>先看上游,主页是一个肯定的入口;进入淘宝后,也可以不干别的,直接进入购物车,因此我们把购物车从橙色变为更高级的红色;我的淘宝是和主页、购物车并列的入口,也标为红色;地址管理的scenario非常特殊,可以作为一个独立的业务,因此也标为红色。</p>    <p>再看下游,详情后面紧跟着的业务应该是确认订单和支付,当然也可以先和商家讨价还价,进入旺信聊天页面,这些个下游页面我们标记为绿色的。如下图所示:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/931b0b8c7ffb66ad39999ab8c54fcf9e.png" width="439" height="493"></p>    <p>图中出现了4种颜色,红色,橙色,蓝色,绿色,也就是说,淘宝的绝大部分业务流程,都可以以详情为核心,串联起前后一共3~5步,成为业务链。而每条业务链,就是一个Scenario!</p>    <p>4色定理,怎么让我想起了微软大田村的logo呢?</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/efe831f00fb13b26d51ecd5fdae3fc52.png" width="241" height="239"></p>    <p>OK,让我们照着这个思路,回过头浏览一下淘宝中的所有页面,大概能总结出以下几种scenario:</p>    <ul>     <li>Home->H5(如天猫,聚划算)->详情->旺</li>     <li>Home(猜你喜欢)->详情->旺</li>     <li>Home->RushBuy->详情->旺</li>     <li>购物车->详情->旺</li>     <li>店铺->详情->旺</li>     <li>我的淘宝->H5->详情->旺</li>     <li>我的淘宝->设置[list]->关于[detail]->版权信息[chat]</li>     <li>我的淘宝->订单管理->详情</li>     <li>Home->搜索[list]->详情[detail]->旺[chat]</li>     <li>消息(物流)->物流列表[list]->查看跟踪[detail]</li>     <li>消息(商户)->旺[chat]</li>     <li>收货地址管理->ADRU</li>     <li>……</li>    </ul>    <p>还有一些分支,处于第3层和第4层,我没有列出来,不太重要。以上这些足够我们整理出一个合理的需求分析了,如下示意图:</p>    <p> </p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/5d6177475b24db523c489637b056d6c4.png" width="562" height="560"></p>    <p>也就是说,主页、店铺、购物车、我的淘宝、地址管理等,都可以作为后续一系列业务的入口看待,我们把它们叫做Scenario.Home;</p>    <p>淘抢购、搜索、订单管理、天猫、聚划算等,都是一种业务频道,引导用户更方便快捷地购物,我们称之为Scenario.List;</p>    <p>详情是业务核心,成为Scenario.Detail;</p>    <p>后面的业务环节可以叫做Scenario.Chat,里面可以放旺信聊天页,也可以放下单页等等。</p>    <p>淘宝,必须做成四核的,需要4个Frame参与导航,才能符合我们经过缜密需求分析得出的完美业务模型。</p>    <p>于是,我们可以把业务抽象成这个样子:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/a9322a814f349c9f1e06d32280cb7a52.png" width="679" height="215"></p>    <p> </p>    <ul>     <li>A是一个Scenario的名字;</li>     <li>1/2/3/4分别是四核导航的4个Frame;</li>     <li>A1/A2/A2'/A2"/A3/A4/A4'是这个scenario所涉及的页面,后面的序号代表它们应该在那个Frame上显示,如果需要的话,在2/3/4三个frame上都可以做传统的Z轴导航。比如在淘抢购中,在Frame 2上点击一个商品,会在Frame 3上显示一个详情;在Frame 2上点击另一个商品,在Frame 3上就会显示另一个详情。</li>    </ul>    <p> </p>    <h2>三维(Z+X+Y)导航模式</h2>    <p> </p>    <p>如果你没看懂前面说的二维(Z+X)导航模式,那就goto前一章节重新看。如果看懂了,那下面的东西就很容易理解了,就是在那个基础上多加了一维Y轴导航。</p>    <p>咱们还是看图说话吧,请看下图:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/006d3c11e9775ade717d7d541509dcc3.png" width="589" height="424"></p>    <p> </p>    <p>从上到下,一共三层(可以是N层)淡蓝色的面板,每一层表示一个scenario的内部navigation,这一点与前面说的二维导航模式相同,只不过是多了一个frame 4。具体用几个frame,是由这个App的Scenario决定的,原则上讲,用的Frame的数量越少,对系统的performance越有利,code写着也会简单些。</p>    <p>淡蓝色的面板的数量是随着用户navigation的深入而增加的,随着按下back键而减少的,可以把蓝色的面板定义为Scenario类。在下面这张图中,用户首先在最下面的Scenario A中畅游了6个页面(A1,A2,A2',A3,A4,A4'),其中A1->A2做了X轴导航,也就是切换了Frame;在Frame 2中做了Z轴导航,然后从A2->A3做了X轴导航,然后再次X轴导航到A4,在Frame 4中做了最后一次Z轴导航之后,发现了一个神奇的按钮,切换到了Scenario B,也就是到了第二层面板。以此类推,最后到了Scenario C中,又搞了一些事情。</p>    <p>此时,在Frame 1的导航历史中,有3个页面,A1/B1/C1;在Frame 2的导航历史中,有7个页面,A2/A2'/B2/B2'/C2/C2'/C2";在Frame 3的历史中有个3个页面,A3/B3/C3;在Frame 4中有7个页面,A4/A4'/B4/B4'/B4"/C4/C4'。</p>    <p>用下面两个类可以表示以上数据模型:</p>    <pre>  <code class="language-java">public class Scenario  {           public FrameSlot HomeSlot;           public FrameSlot ListSlot;           public FrameSlot DetailSlot;           public FrameSlot ChatSlot;             public Scenario(Frame scenarioFrame, Frame listFrame, Frame detailFrame, Frame chatFrame, string url)         {                   this.HomeSlot = new FrameSlot(scenarioFrame);                   this.ListSlot = new FrameSlot(listFrame);                   this.DetailSlot = new FrameSlot(detailFrame);                   this.ChatSlot = new FrameSlot(chatFrame);                   this.Url = url;          }   }    public class FrameSlot  {           public Frame frame; // current frame          int depth = 0; // navigation times   }</code></pre>    <p>在Scenario类的初始化函数中,从外面指定了Frame的实例,也就可以保证不同的Scenario实例可以共享同一组Frame。</p>    <p>而这些Frame,可以这样在XAML中定义:</p>    <pre>  <code class="language-java"><Grid x:Name="gridRoot" SizeChanged="gridRoot_SizeChanged">          <Grid.ColumnDefinitions>          <!--vertical menu bar-->                  <ColumnDefinition Width="64" x:Name="menuColumn"/>                  <ColumnDefinition Width="*" x:Name="contentColumn"/>          </Grid.ColumnDefinitions>          <localControls:VerticalMenuBarControl2 x:Name="menuBar" Grid.Column="0"/>            <!--for content page-->          <Canvas x:Name="panel" Grid.Column="1">                  <Frame x:Name="homeFrame" Canvas.ZIndex="10"/>                  <localControls:VerticalSeperatorControl x:Name="listSep"/>                  <Frame x:Name="listFrame" Canvas.ZIndex="20"/>                  <localControls:VerticalSeperatorControl x:Name="detailSep"/>                  <Frame x:Name="detailFrame" Canvas.ZIndex="30"/>                  <localControls:VerticalSeperatorControl x:Name="chatSep"/>                  <Frame x:Name="chatFrame" Canvas.ZIndex="40"/>          </Canvas>  </Grid> </code></pre>    <p> </p>    <p>从XAML中可以看到,最左侧是个Vertical Menu Bar;右侧是个Canvas面板。之所以使用Canvas面板,是因为这个panel类型最简单,可以任意调整里面Frame的位置。其它的panel,如Grid, StackPanel, RelativePanel等等都有自己的一套Arrange Children的算法,我们并不需要。当然,你也可以自己从panel类派生出一个MyTaobaoPanel类,来组织这4个Frame。</p>    <p>好了,到目前为止,我们经过需求分析,找出了合理的模型,制定了基本类和界面逻辑,下面可以着手开发了……此处略去10000字的开发过程……最后的样子如下面的截图所示:</p>    <p>主页:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/763d01f43e08d3fcc5680c33a27ee4fb.png" width="576" height="310"></p>    <p> </p>    <p>在主页上点击了淘抢购:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/a84bea564b577efa43c73d9ea23d8f11.png" width="576" height="311"></p>    <p> </p>    <p>在淘抢购中点击了第一个商品:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/f8a3068067a3a20eb39ed93aac04a71b.png" width="576" height="311"></p>    <p> </p>    <p>在详情中点击了旺旺:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/67171722fe77b0da0f156d6ca819579f.png" width="576" height="311"></p>    <p> </p>    <p>在详情中点击了店铺:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/66cc1d2d03c9bafd85599669916c794e.png" width="576" height="311"></p>    <p> </p>    <p>在左侧的超级菜单中点击了我的淘宝:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/63a1416d991f43ee527891783307b5db.png" width="576" height="310"></p>    <p> </p>    <p>在我的淘宝中点击了设置:</p>    <p><img alt="淘宝新UI需求分析篇 - “四核”驱动的“三维”导航" src="https://simg.open-open.com/show/ac6ce9bb63bb3d21843efa15041eaa0d.png" width="576" height="310"></p>    <p> </p>    <p>页面太多了,上百种navigation的组合路径,一网打尽!</p>    <p>现在各位看官可能明白了,“四核”指的是4个Frame参与页面展示与导航,”三维“指的是在三个维度上的导航方向,一维是在一个frame上的Z轴栈式导航,二维是在两个frame以上的横向导航,三维是在两个Frame以上的横向导航,再加上虚拟层之间的Y轴导航,切换场景相当于OS的进程切换,只不过是栈式的。</p>    <p>孔子还说:"完美的抽象不能决定软件的成功与否,但能判别开发者的素质。"</p>    <p>老子也说:"好的开发者是一个软件成功与否的基石。"</p>    <p>庄子说:……哎,让庄子喝口茶水吧,实在编不下去了,意思你们都知道的,大家努力提高自己的职业素质吧,多学习,多观察,多思考,多实践,更好地抽象这个世界。</p>    <p>来自:http://www.cnblogs.com/ms-uap/archive/2016/03/28/5306123.html</p>    
 本文由用户 Eloisa8912 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1461636796748.html
UI