Home » 分类 原型/交互设计 下的文章

『多级目录结构』在移动端的交互设计

3000字,读20分钟。【分类】和【目录】傻傻分不清?看看本文,豁然开朗。

来自小密圈朋友提问:如何在移动端界面,表现出树形结构?

需求内容:为油品销售员提供一个知识库,行业/工艺/设备/用油部件/品牌产品/,一个树形结构,共有5个层级!每个层级都对应的知识点。如果是web界面,左边展示树形导航,右边展示内容;但是在移动端怎么展示5级树形呢?同时每一级又要包含知识点,求解答。

+阅读全文

剖析朋友圈点赞:交互设计师眼中的“用户倾向系统”

用DAU/MAU说话的年代,“点赞”这种轻量级交互行为,成为增加用户黏性的战术级重武器。从士兵到将军,如果对这些小零碎“如数家珍”,必将在征尘中游刃有余,攻城夺地,扬名立万。

点赞、喜欢、关注、收藏、评分……几乎所有的产品都会遇到这些“不起眼的小功能”,姑且可以称为“用户倾向系统”,它们的效果显而易见:

+阅读全文

[逆向工程]信息架构推演<微信消息列表>步骤细节+新手扫盲

无数小伙伴分析过微信的产品、交互设计,然而,这个亿万人使用的社交软件,它的「信息架构」到底是如何的?消息列表,是微信客户端的主界面,今天就来分析一下,管中窥豹!本文富含大量图表,实在是互联网小白和老鸟应该必读的,请不要吝惜流量。

+阅读全文

规范用户的评论角色

用户与网站进行交互的过程中,针对某一主题提交评论恐怕是最精彩的部分了,所谓“意见领袖”和“口碑”都是由此过程产生,时下流行的“水军”、“网络打手”、“信用粉刷匠”等“网络灰社会”也正是假籍用户评论制造舆论、扰乱视听,评论管理是网站运营中最棘手的工作之一。

+阅读全文

“后台体验”中若干原则的补充

首先,强烈推荐读者猛击《网站后台用户体验一个容易被遗忘的策划》一文。

同样都是Web页面,为什么要人为的区分为“前台”和“后台”呢?有个缘由在其中:那些需要受到特殊安全保护的表单和网站控制中枢,在某些情况下必须集中的设计和部署。管理员、内容编辑人员、权限用户……这些内容创造者是一群特殊的用户,需要关照;在“用户创造内容”的大趋势下,“前台”和“后台”的概念越来越模糊,可以肯定的是类似SNS这样的软件也会有所谓“后台”;是否硬性的区分“前后台”并不在本文的讨论范畴,只针对“后台用户”这一特殊群体提供一些可行的体验优化原则

+阅读全文

一个网站的礼仪

人讲礼仪为先,树讲枝叶为源

不知从什么时候开始,“以用户为中心”成了网络圈的流行时尚,勇于承认这种理念是先进的,希望不要仅仅成为某些人的口头禅。尊重用户从网站的礼仪开始,一个有尺度讲道理明是非精内容的网站是走向成功的第一步,也是“以用户为中心”的前提;谁也不相信衣衫褴褛鼻涕流到下巴的乞丐能为用户提供舒适便捷的服务,那是天方夜谭。网站的礼仪能够让用户产生信任,提升感官愉悦,并且带来一种依赖和归属。

+阅读全文

页面线框图教程(之七):不需要存在的原型

线框图原型是网站核心策略“着陆”的重要步骤。将机巧的想法转化为实际产品是一个复杂过程,这种复杂并不仅仅体现在技术层面,而更突出的表现在团队配合中;倘若三两个人的迷你团队,只需要很少的文档就能够达成协作一致;页面原型作为从创意到执行的中间文档,贯穿整个团队的工作,对于大型项目和团队协作的确有些效果。作为线框图系列教程的完结篇,本文将对页面原型的前世今生进行讨论,探寻抛弃原型的敏捷之路。

+阅读全文

页面线框图教程(之六):用交互实现屏幕复用

屏幕是万维网的创作介质,引入一个时下很流行的概念,屏幕也是所有“数字多媒体”的展示介质,这是与传统的纸面印刷最大的区别;屏幕带来了用户交互、时间与空间差异,这也是毕昇发明活字印刷术时始料未及的;创建网页的本质是内容信息架构的呈现过程,如果玩转内容形式主义是雪中送炭,那么用交互实现屏幕复用就是锦上添花。当网站策划人员、产品经理也不得不暂时替代交互设计师的工作(这是大量存在的),就必须要掌握最基本的屏幕复用原则。

+阅读全文

页面线框图教程(之五):玩转内容形式主义

低保真原型已经确定了页面的基本结构,至此,作为产品规划和网站策划的工作已经完结了;但是往往在实际的团队配合中需要更精细的“蓝图”作为可执行的指南,此时,高保真原型更具有实践价值。所谓“高保真”即尽量的将页面细节进行规范和展现,模拟最终页面效果和用户交互,是页面逻辑结构向最终形式的一种延展;同一内容结构具有表现多样性的特征,即从一个低保真原型可以衍射出若干高保真原型;进行页面高保真线框图设计,就是玩转内容的形式主义。

+阅读全文

页面线框图教程(之四):再谈网站导航系统

在确立低保真原型线框图之后,一般的根据需要进行高保真设计;在《网站导航设计杂谈》中,已经明确了导航系统的设计并非网站设计的第一要务,然而整个网站的设计的核心任务却只有一件事:引导用户快速的访问到自己需要的内容;导航系统是完成这种用户引导的重要工具之一,因此无论是否需要生成高保真模型,针对导航系统的详细描摹都显得非常的迫切,几乎成为了设计线框图的必须步骤。

+阅读全文

页面线框图教程(之三):模板的活字印刷术

元素填充是一个快捷的过程。作为线框图设计者,那些简单项目完全可以一口气把所有的页面都进行填充;然而对于复杂的系列线框图,更推荐先对模板进行整理和细化。模板是贯穿整个项目的信息纽带,同时决定了最终效果的访问风格;理解模板的概念并不难,甚至很多原型设计工具都提供了单独的模板功能(比如Axure);模板系统如何建立、如何灵活应用,将是本章的话题。

+阅读全文

页面线框图教程(之二):画地为牢的框架设计

无论是设计低保真草稿还是高保真的模拟原型,线框图都是从基本的布局开始;良好的布局是顺畅视觉流程的开始,同时也奠定了最终访问效果的基调;布局是一个画地为牢的过程,什么东西放在哪里一旦基本确,界面就大体确定了;设置条条框框并不是为了限制界面设计师的发挥,而是要达到页面之间的协调和整个网站的统一;本文作为系列教程的第二篇文章,将讲述如何进行基本布局和需要注意的问题。

+阅读全文

页面线框图教程(之一):从本质到表象

页面线框图(Wire frame)是网站设计方案中的重要组成部分,无论是I-BoardPage-LayoutUI-Draft这些不同的称呼,它们的本质都是一样的,网站策划师、网络产品经理的最后交付文档,通常的呈现设计是最直观有效的。单纯从设计的角度,线框图也可以看作一个视觉呈现过程,虽然如此,也不能把线框图的设计当作简单的视觉问题。如何看待线框图,如何着手设计线框图,如何把握线框图的详细程度,如何让其他合作者看懂线框图,就是本系列文章要解决的问题。

+阅读全文

“预注册”是一把金钥匙

注册,一直被很多网站视为很重要的用户流程;当越来越多的公司将网站的注册用户数量作为运营考核重要指标之后,那些产品经理们每天忙着考虑“如何吸引更多的人注册”,而有谁还去探求“为什么需要有注册”?也许无从考证类似CGI这样的脚本语言是什么时候出现的,但可以肯定的说“注册来自内容私有化”;原始社会的路不拾遗,不可能催生锁和钥匙;私有内容为万维网引入了“权限”的概念,于是有了用户的注册。

+阅读全文

网站导航设计杂谈

网站策划中百分之七十的工作是围绕网站导航开展的”——这句话是错的。许多优秀的网站成功在导航设计,许多糟糕失败在导航设计,这个现象的确存在,但这并不意味着导航设计占有网站策划工作的绝对重心。

不是所有的网站都需要导航

策划这类思维活动,一旦形成了惯性也就失去了创造力。很多从事网站策划的朋友,总是把着眼点放在了网站的导航,殊不知很多网站压根不需要导航,因此,正确的网站策划思维应该是首先明确“我们是否需要导航”,然后才是“我们需要一个什么样的导航

+阅读全文