『多级目录结构』在移动端的交互设计
<p>3000字,读20分钟。【分类】和【目录】傻傻分不清?看看本文,豁然开朗。</p>
<p>来自小密圈朋友提问:如何在移动端界面,表现出树形结构?</p>
<p>需求内容:为油品销售员提供一个知识库,行业/工艺/设备/用油部件/品牌产品/,一个树形结构,共有5个层级!每个层级都对应的知识点。如果是web界面,左边展示树形导航,右边展示内容;但是在移动端怎么展示5级树形呢?同时每一级又要包含知识点,求解答。
</p>
<p>3000字,读20分钟。【分类】和【目录】傻傻分不清?看看本文,豁然开朗。</p>
<p>来自小密圈朋友提问:如何在移动端界面,表现出树形结构?</p>
<p>需求内容:为油品销售员提供一个知识库,行业/工艺/设备/用油部件/品牌产品/,一个树形结构,共有5个层级!每个层级都对应的知识点。如果是web界面,左边展示树形导航,右边展示内容;但是在移动端怎么展示5级树形呢?同时每一级又要包含知识点,求解答。
</p>
<p>朔风吹柳絮,万里雾云迷。望长空恰似玉龙斗太虚,白茫茫粉饰山河瑞景奇。采樵人归来报道梅花放,勾惹起白头翁欲踏琼瑶寻佳句。唤童儿:“收拾那斗笠狐裘,备上我的驴。”</p>
<p>以上是八角鼓岔曲儿《赞雪》( 荣剑尘 1881-1958)的唱词,短短86个字,勾勒出北风吹雪,大地苍茫,主人公欲冒雪赏梅的故事。全篇都在说雪,但是没有任何一个雪字,所谓赞雪不露雪(隐喻设计)。</p>
<p>西红柿炒鸡蛋、番茄鸡蛋汤,主食材完全相同;素鸡是豆制品,口感味道匹敌鸡肉;土豆和茄子的组合可以有:土豆丝炒茄丝、土豆片烩茄片、土豆丁焖茄丁、土豆块烧茄块、土豆泥拌茄泥……现实生活中的食材料理,就是一门组合的艺术。</p>
<p>与烹饪类似,交互设计也是一门组合的艺术。确定业务目标和范围,相当于给定了规定食材;交互框架与模式选用,相当于处理食材的基本刀工;五味调和,相当于具体设计过程;菜品色香味呈现,相当于转化率结果;满汉全席,相当于多个转化结果支撑的运营体系。</p>
<p class="framedashe">2013年写于知乎,回答好友 @虫子 关于“概念设计”的三点疑问:1.“四步法:搜集、整理、判断、创新”是否贯穿整个产品设计流程;2."概念设计To信息架构"中,确定功能规格是在哪一步?3.《用户体验要素》第二层中,功能规格的颗粒度问题。<p>
不理解信息架构,可能永远是交互设计的门外汉!超文本标记语言Hyper Text Markup Language,是一种简单灵活的信息描述,通过学习和使用它,不但能够建立抽象思维和结构化思维,将屏幕交互的本质融会贯通,更能确立与动效/前端工程师的沟通优势,一劳永逸。
<p>思维导图,近年非常热门的一类工具,仿佛成了瑞士军刀,切水果、开罐头、拧螺丝……好像还能杀牛砍树?工具,永远是辅助;但,太倚赖某种工具,可能就被固化了某些习惯,成为路上羁绊。</p>
<p>无数小伙伴分析过微信的产品、交互设计,然而,这个亿万人使用的社交软件,它的「信息架构」到底是如何的?消息列表,是微信客户端的主界面,今天就来分析一下,管中窥豹!本文富含大量图表,实在是互联网小白和老鸟应该必读的,请不要吝惜流量。</p>
<p class="framedashe">我特感奇妙的是事物何以融合一体I just wondered how things were put together
信息之父 香农Shannon(1916-2001)</p>
<p>常有小伙伴,执流程图、栏目规划、界面原型……耳耳,乞曰 「帮我看看这个信息架构吧」;出谋划策之余,万般提醒「信息架构不是这样滴」,收效甚微;如此往复,发现诸君未必是不理解「架构」,只因忽略了「信息」这个本质,遂撰文以饲。</p>
<p>关于「信息」的定义,请自行查阅各大百科和香农原版论文,作为一个产品/交互设计师,能理解下面这些就好了,毕竟大家更注重实战。</p>
<p class="framedashe">都云人言可微,哪怕微言耸听!大小门户齐上阵,且看沙场秋点兵。--定场诗一首</p>
<h2>前言:<span class="txred">回到七嘴八舌的原始社会</span></h2>
<p>所谓<span class="so-called">沟通</span>,就是人们忙着做两件简单事:听别人说什么;自己该说什么。</p>
<p>有一种沟通,主席台上某个发言人拿着扩音器讲话,身为听众只能在台下窃窃私语,这个叫<span class="so-called">门户</span>;有一种沟通,大家都可以轮流上讲台上拿着扩音器说话,并且邀请台下的观众评论,这个叫<span class="so-called">论坛</span>;有一种沟通,大家都回到自己家说话,张贴标语,然后可以任意的去别人家拜访和聆听,这个叫<span class="so-called">日志,也叫Blog</span>;还有一种沟通,大家围坐在一起,你可以选择收听那些你感兴趣的人,物以类聚,七嘴八舌,这个外国叫Twitter,到了中国叫“微博”。</p>
<p>仅仅有了团队也只是网站建设的开始,无法想象<span class="so-called">刀耕火种</span>式的创意产业如何生存与发展,在讨论人力雇佣成本之余,也必须考虑夹杂在某个网站项目当中的<span class="so-called">其他成本因素</span>。成本核算是传统企业财会工作当中的一项基础工作,对于拥有<span class="so-called">大型设备</span>的工业企业,通常拥有<span class="so-called">大规模的厂房和固定资产</span>,对于创意产业,以传统的<span class="so-called">产出率和设备磨损</span>去衡量经营管理成本是不科学的。</p>
<p>创意产业的特殊性在于:<span class="so-called">其根本价值来自脑力劳动</span>。看传统行业,要生产汽车必须先有厂房和生产线,然后是技师种配套团队;要采煤首先有矿脉和设备,然后是工人和管理团队;<span class="so-called">要做网站首先要有团队,然后才是其他硬件设施</span>,这就让人力成为了主导网站建设成本的主因。</p>
<p>我们的丑陋,是在于我们不知道自己的丑陋。——柏杨</p>
<p>倘若把任何事情都冠以“<span class="so-called">营销</span>”的头衔,恐怕可以写出几百万本书,仅仅是浪费些纸张油墨,而对这个世界并没有任何的改观。的确,每时每刻都存在营销,婴儿的啼哭是营销,闪烁的霓虹灯是营销,红色的消防栓也是营销……<span class="so-called">网络是一种工具</span>,如果能够把“付诸于网络的营销行为”称之为<span class="so-called">网络营销</span>,那么能否把“付诸于菜刀的营销”叫做<span class="so-called">菜刀营销</span>呢?观察当今国内盛行的网络营销之风,不难发现一些奇妙的现象,官怪陆离。</p>
<p>在《垂直门户网站的内容层次》一文中,简要介绍了<span class="so-called">内容层次的架构划分原理</span>;如何使用这些原理为用户组织内容,实际中的原理<span class="so-called">应用方法</span>,是本文讨论的核心内容。诸多围绕某一领域深入挖掘内容价值的垂直网站,它们并没有<span class="so-called">摆脱时间轴对内容桎梏</span>,形成了与公众信息门户直接竞争和被打压的境地;同样可以看到,那些综合门户网站的垂直频道苦于没有特色而疲于应付扑面而来的信息竞争。 </p>
<p><span class="so-called">公众信息门户就是摊煎饼,面积越大越好;垂直主题门户就是掏耳朵,有一定的深度才觉得舒服</span>。伴随《<span class="so-called">扫把星理论</span>》在国内的风靡和活学活用,加上地产、化工一系列行业门户的风生水起,垂直主题门户这种形式被打了鸡血,如雨后草原上的蘑菇,随便踩一脚都能压扁一大片。要想在一大片蘑菇当中鹤立鸡群,就必须有挺拔的菌冠,而那硕大蘑菇的倒掉往往因为根扎的不够深,垂直网站要<span class="so-called">建立牢固的落地抓力</span>,就应当注意内容层次的挖掘。</p>
<p>从来不爱跟风扎堆,实践证明“<span class="so-called">闻着臭味往往找不到公厕,也许仅仅是跟随着粪车</span>”,这不是一种保守,也不是一种特例独行,而是一种条件反射。扑面而来的网络营销果然能量巨大,所有的工作IM群都在争抢内测验证码,朋友们还特别为我保留了一个,碍于面子,<span class="so-called">鬼使神差</span>的就跑过去玩了几把,有些小感触,写下来分享。</p>
<p>尊敬的Baidu.CoM:</p>
<p>很荣幸的通知贵站,Baiduspider已经被本站(HoZiN.CoM)完全屏蔽,百度搜索蜘蛛程序再也无法爬行本站的全部内容。</p>
<p class="imagealt">初稿时,一不小心拐到了遍历浏览路径的话题上,于是删去五百字,从头再来^_^</p>
<p><span class="drop">每</span>当提出“<span class="so-called">信息架构</span>”这个概念,总是有人拿出卡片来推演分类,理性递推是一种解决途径,但是必须涵盖信息的全貌;当用户无法了解信息的全部分类时,是否能够给用户提供一种学习方法,这就是我们今天要说的信息闭环设计。</p>
<p>每时每刻,世界上有无数人访问着无数的网站,有无数的网站被建设或关闭。进入网站策划这个领域的第一步,就是要理解“<span class="so-called">我们要作什么,我们的思考围绕具有什么样的特质</span>”。</p>
<h2>网站的本质</h2>
<p>所有运行在万维网上的站点千奇百态、形式迥异、功能各样,从其组织原则和运作原理,我们可以窥探网站的本质:<span class="so-called">离散信息的集合</span>、<span class="so-called">屏幕的超级链接</span>、<span class="so-called">一种营销手段而不是目的</span>。</p><!--more-->
<h3 class="txred">离散信息的集合</h3>
<p>所谓离散信息,指的是<span class="so-called">网站上的独立信息单元</span>。页面上的每个元素,包括文字段落、图片、动画、按钮表单等,都可以是具有一个独立URL(统一资源定位)的<span class="so-called">信息单元</span>,可以相互割离的进行单独的访问。这些信息单元以超级链接或点击响应的方式组织在一起,这种组织方式就是“<span class="so-called">超文本</span>”,而整个万维网也就是运行在超文本协议之上。</p>
<div class="framedashe"><dl><dt>[定义]什么是“信息”和“信息单元”</dt>
<dd>在外部世界中,能够被感官识别感知的,具有确定意义的抽象概念,就是信息。一个手势可以是信息,一段文字可以是信息,一张图片可以是信息;而手势、文字、图片等具象概念,就是信息载体。信息可能是一系列抽象意义的集合,如果将这个集合进行离散化,那些代表离散信息的载体,叫做信息单元,简称“信元”。信息也可能不需要离散化,那他本身的载体就是一个信息单元。</dd></dl>
<p>
<span class="imagealt">页面中的三个信息单元分别代表了三个不同的离散信息</span></p>
信息单元 | 类型 | 信息 |
---|---|---|
图片 | 图像 | 一杯咖啡 |
标题 | 文本 | 轻松时刻 |
段落 | 文本 | 轻松时刻的描述 |
</div>
<h3 class="txred">屏幕的超级链接</h3>
<p>在用户的眼中,信息单元在万维网上通常以“网页”的形式呈现,这就使用户产生了一种错觉:<span class="so-called">网站是由网页组成,而且不仅有一个网页</span>。其实在<span class="so-called">用户意识当中的“网页”就是“屏幕”</span>,也就是网页的用户可视区域,伴随“屏幕”切换,也就带领用户在不同的“页面”进行浏览。网站能够承载海量的信息,就是<span class="so-called">依靠超级链接在不同的“屏幕”之间切换</span>。</p>
<div class="framedashe"><dl><dt>[实例]单页面魔术</dt>
<dd><p>举一个极端的例子,无论什么样的网站,都可以只拥有一个页面!是的,我们用锚点(注)来进行“屏幕”的切换。设置锚点的方法很简单,只需要给HTML标记一个id就可以了,比如</p>
<p><span class="txred"><strong id=”secondpot”>这里是第二屏</strong></span></p>
<p>现在我们已经定义好了一个名字叫secondpot的锚点,我们只要在页面的其他地方设置访问锚点的链接指向secondpot锚点,就完成了锚点跳转。</p>
<p><span class="txred"><a href=http://www.hozin.com/index.html#secondpot title="这是一个锚点">跳转到第二屏</a>
</span> </p>
<p><img src="/../usr/uploads/2015/09/1441126145.jpg" alt="使用多个锚点就能实现在同一页面实现N个“屏幕”的相互转换" class="bar" /><br />
<span class="imagealt">使用多个锚点就能实现在同一页面实现N个“屏幕”的相互转换</span></p></dd></dl>
</div>
<p>既然用一个页面就可以包容所有信息单元,为什么几乎所有的网站都要分为若干的页面?原因非常简单,如果一个页面的字节数巨大,那么就会载入的非常缓慢,分页载入缩短了网站开打时间,为用户带来方便。</p>
<p>超级链接将离散的信息单元按照拓扑结构进行组织,让屏幕之间的切换“<span class="so-called">看起来很有逻辑</span>”,而这些信息单元未必都在一个域名之上,我们可以按照自己的需求引用那些万维网上的资源,实现了最大程度上的资源共享,使信息进行了有效的组织。直白的说,<span class="so-called">网站就是利用链接结构把离散信息进行整合</span>的结果,这种整合<span class="so-called">跨越了屏幕和空间</span>。</p>
<h3 class="txred">一种营销手段而不是目的</h3>
<p>无论是盈利性质的,还是非盈利性质的,网站本身不产生价值。实际上,你很难想象在服务器上的一堆二进制代码能够促使用户进行消费,消费关注点并非在网站本身,而是网站承载的有价值信息。在全世界,每天有成千上万的专业人士为了优化网站而努力,逐渐形成了一套所谓“<span class="so-called">网络营销</span>”理论和“<span class="so-called">电子商务</span>”模式。</p>
<p>建立一个网站,<span class="so-called">其目的是让信息传播得更快、更便捷、更广泛</span>,这些信息具备公益性或者具有商业价值;人们访问网站,其目的是更快、更便捷、更精确的了解这些信息。围绕信息传播,网站提供了一个<span class="so-called">开放和可控的介质平台</span>。</p>
<p>“所有的网站都是营销手段,所有的网站都需要经营。”必须明确,网站如果无法成为营销手段,那么就没有必要经营它。在建设之前,就应该明确网站在营销的位置,提供哪些信息和在线服务,有的放矢的进行<span class="so-called">规划、建设、运营</span>。
通常意义上,网站在营销中扮演了媒介角色,网站也越来越成为销售和交易工具,在这种情况下,我们也必须明确网站只是一种手段,而传播<span class="so-called">有用的信息</span>、实现其价值才是网站<span class="so-called">存在的目的</span>。</p>
<h2>网站的三个要素</h2>
<p><span class="so-called">由信息单元、页面、超级链接组成</span>的网站,是一个复杂的整体,其复杂性根据网站类型和用途的不同而存在差异。总的来说,网站由三个主要层次组成:<span class="so-called">内容</span>、<span class="so-called">功能</span>(行为)与<span class="so-called">表现</span>。</p>
<p>网站的三个要素之间不是平行关系,内容为首、功能其次、最后是表现,形成一个递减的权重关系。网站策划就是围绕这网站的三个要素展开,从营销的角度协调三者关系,实现网站存在的价值。</p>
<h3 class="txred">内容</h3>
<p>所谓“内容”,就是信息,是一种<span class="so-called">抽象概念</span>。</p>
<p class="framedashe">[举例]《简爱》作为一本畅销小说有各种不同版本,无论英文、日文、中文、简装、精装还是电子读物,所有版本的核心内容都是:珍妮的成长故事。如果我们建立一个以《简爱》为主题的网站,核心内容依然不变。</p>
<p>每当我们匆匆打开电脑,迅速在搜索引擎上查询某个办公室坐落位置;每当我们信手闲游,冲浪在门户网站;每当我们拇指飞动回复一条手机短信;让我们回忆数字科技给生活带来的一切,除了信息还是信息,<span class="so-called">关注点</span>一直是内容。</p>
<p>内容的<span class="so-called">存在方式</span>就是信息单元,内容可以蕴含在文本、图片、动画、视频等形式当中,即内容表象是多样的;所有内容都可以用文本来描述,因为文字是一切文化形式的源泉,就好比电视剧有剧本、动画有脚本、讲话有提纲。将文本作为一种通用的信息单元,即<span class="so-called">超文本</span>。</p>
<p>网站为了内容而存在,内容传播是网络营销的主要手段;浏览内容是用户的第一诉求,当万维网越发蓬勃发展,内容的重要性就越发凸显。那些失去用户的网站往往因为内容枯竭;那些失去吸引力的网站也往往因为内容落伍。</p>
<div class="framedashe">
<dl><dt>[思考] 在进行内容策划时,必须保持如下思考</dt>
<dd>传达主题是什么?(核心内容)</dd>
<dd>每个栏目如何表述?(分支内容)</dd>
<dd>如何组织网站的文字?(上下文方式)</dd>
<dd>还能提供那些信息?(内容关联)</dd>
<dd>哪些信息是不必要的?(内容一致性)</dd></dl></div>
<p><span class="so-called">网站的差异就是内容的差异</span>,<span class="so-called">网站竞争本质是内容竞争</span>。用户选择浏览某个网站,不是因为某个网站漂亮或者有好彩头,仅仅是因为那里有用户需要的信息。</p>
<p>一个漂亮但内容空洞的网站,很难产生价值;一个漂亮但内容不更新的网站,没有人会第三次访问。</p>
<h3><span class="txred">功能</span>(行为)</h3>
<p>“功能”具有<span class="so-called">两层含义</span>,一是网站<span class="so-called">提供内容的形式</span>,二是用户<span class="so-called">获得内容的方式</span>,两层含义相结合,就是所谓“交互”。</p>
<p>内容并不是网站特有的要素,书籍、杂志等传统印刷品都可以编排内容;正是因为有了交互才使得万维网能够在屏幕上展示无限丰富的内容,交互成为万维网最具吸引力的特性。</p><p>即便最简单的访问,用户也需要与浏览器产生交互,比如输入地址、滚动页面、点击鼠标等,通过不断切换“<span class="so-called">屏幕</span>”寻找有用内容。</p>
<p>我们总是能网站功能中找到在现实生活中内容组织形式的影子,更令人振奋的是网站功能正在代替传统沟通,例如电话调研正逐步转向万维网调查。</p>
<p>在万维网产生之前,人们的阅读习惯是<span class="so-called">线性的</span>;交互式阅读给了用户全新的体验,不断跳跃超级链接的过程中缩短用户与内容的距离。用户通过操作自发寻找那些他们感兴趣的内容,促使网站功能的形成;<span class="so-called">功能赋予内容以行为</span>,让那些羊皮卷中沉睡的文字变成了随时听候调遣的精灵。</p>
<p>功能(行为)整合了内容(信息),将<span class="so-called">内容更加可控、个人化</span>,网站可以为某种特殊身份的用户提供<span class="so-called">特殊内容</span>。正是这种<span class="so-called">整合</span>,使那些非物质商品方便的在万维网上交易和传播。如果没有网站功能,那么在线交易充值卡、论文、电子优惠卷都无法实现。</p>
<p>功能不仅缩短了用户与内容之间的距离,更使得用户之间的信息交流成为可能,而“<span class="so-called">用户创造内容、用户分享内容</span>”也逐渐成为网站运营的主流。</p>
<div class="framedashe">
<dl><dt>[思考] 设置网站的功能,保持如下思考:</dt>
<dd>通过这个功能,你能给用户带来什么?(交互必要性)</dd>
<dd>用户在什么情况下会使用这个功能?(交互效率)</dd>
<dd>用户需要哪些操作?(用户成本)</dd>
<dd>如何实现这个功能?(技术成本)</dd>
<dd>所有的用户都使用这个功能么?(交互差异性)</dd>
<dd>特殊用户无法使用功能时怎么办?(交互容错性)</dd></dl>
</div>
<p>内容是吸引用户访问网站的主要原因,交互帮助用户<span class="so-called">更便捷、更自主</span>的访问内容;优秀的功能策划是<span class="so-called">催化剂</span>,帮助内容去实现网站的价值。</p>
<div class="framedashe">
<dl><dt>[知识]“功能”与“技术”的关系</dt>
<dd><p>网站“功能”依赖“技术”去实现,然而“功能规划”与“技术规划”是完全不同的概念。功能是面向“内容”与“用户”,技术是面向“系统”与“硬件”。</p><p>万维网出现的十几年间,计算机技术有了突飞猛进的发展,从运算速度和运行效率上都有了显著的提高;网站功能是一个平稳的发展过程,搜索和内容管理依然是最常见的万维网服务。</p>
<p>在实际的网站运营中,存在着重视技术而忽略功能的现象:很多网站不断采用运算速度更快的服务器、执行效率更高的开发语言,而忽略了功能的创新和开发。功能作为网站核心要素之一,应该得到足够的重视。</p>
</dd></dl></div>
<div class="framedashe">
<dl><dt>[误区]功能越强大的网站才是好网站</dt>
<dd><p>交互是为了让信息更便捷的被用户找到,这种便捷是以增加用户的操作为代价的。在实际操作中,只有那些信息量巨大的网站,通常才设置复杂的功能;功能的设置还与网站的访问量、用户兴趣差别有关。</p><p>我们经常可以看到一些小型网站设置了非常复杂的功能,而这些功能要么徒劳增加了用户操作、要么被“束之高阁”很少被使用,造成了不必要的浪费。复杂的功能还可能造成网站载入速度缓慢,影响了用户体验。</p><p>网站功能设置是一个循序渐进的过程,应该根据内容量、访问情况的变化逐渐增加交互,并及时撤销那些不经常被使用的功能。</p></dd></dl>
</div>
<h3 class="txred">表现</h3>
<p>通过视觉修饰对信息单元进行美化,让整个网站“<span class="so-called">看起来舒服</span>”,就是所谓“表现”。</p>
<p>内容与表现是可以分离的,同样的内容可以有不同的表现形式,即一个网站可以有很多套不同的“<span class="so-called">风格</span>”。关于“<span class="so-called">舒服还是漂亮</span>”的大讨论一直在万维网设计师之间延续;漂亮吸引用户,舒服留住用户,从营销角度分析:“<span class="so-called">舒服就是漂亮</span>”。</p>
<p>网站视觉修饰依据内容差异也会有不同要求:</p>
<p>从未有过产品经理的从业经历,曾经做过某网络营销机构研发部的Leader,规划过产品服务体系,偶然翻出旧工作文档,感觉应该对产品管理有所帮助。</p>
<p>产品经理,虽然叫“经理”,但究竟掌握着多少决策权力,因公司管理架构而异;<span class="so-called">产品和服务是一对双胞胎</span>,商业上都是为了满足客户需求存在的,每谈产品而抛弃服务是片面的;一个产品的规划过程,也是服务的规划过程,产品不能离开服务支持部门独立存在;产品的管理包含了对服务的管理。</p>