B4.5-Skeleton 框架层

结构层界定了产品用什么方式来运作,框架层确定用什么样的功能和形式来实现

结构层-较大的架构和交互设计;框架层-独立的组件及组件间的关系

习惯和比喻

让你的界面与用户早已养成的那些习惯保持一致很重要,更重要的是,界面要与它自身保持一致。

将产品特性和人们在真实世界中曾有的经历建立联想——>即使这些特性和它所代表的的比喻之间的关系,对你来说是显而易见的,它也仅仅是你的用户可能会联想到的、众多比喻中的一个——>尤其当这些用户来自于和你完全不同的文化背景时——>可以提供一些上下文/背景环境辅助用户决策——>避免用户在猜测过程中错误操作/感到困惑


1. Interface Design  

 “选择正确的界面元素”——>  “帮助用户完成任务”

容易被理解和使用:一眼最看到最重要的东西,不重要的东西不会被注意到

Structure决定哪个功能在哪个界面上完成,Skeleton决定这个功能在界面上如何被感知和操作

应对极端情况的界面对于普通情况下的用户而言是设计不良、过于复杂的

EX1:考虑默认值

EX2:自动记住用户最后一次选择状态

Check Box 复选框:选项独立,可多选

Radio Button 单选框:选项互斥,选一个

Text Field 文本框:允许输入文字

Dropdown List 下拉菜单:从下拉选项中选择一个

List Box 多选菜单(含滚动条):从滚动选项中选择一个/多个

Action Button 操作按钮  触发/执行某个操作


2. Navigation Design  “去某个地儿”

导航提供给用户一个在网站内部跳转的路径(点击任意标签能否到达目标位置?)

导航设计必须传达出导航标签和对应包含的内容之间的联系(点击某个导航标签可以获得哪些内容,完成哪些任务?)

导航设计必须传达出导航标签与当前浏览内容之间的联系(点击不同导航标签可以对我当前要解决的任务提供什么帮助?)

用户初次访问网站,可能到达网站内的任意页面,所以每个页面的导航最好是相对独立的。

Navigation System 导航系统

Global Navigation  全局导航

并非贯穿整个网站(固定导航),固定的元素不一定是全局的

不管你想去哪儿,你都能从全局导航中(直接/间接)到达那儿。

Local Navigation 局部导航

可能只提供一个页面的子级、父级、兄弟级通路

如果你的架构反应了用户对这个网站内容结构的思路,那么局部导航很方便。

Supplementary Navigation 辅助导航

辅助导航提供全局、局部导航无法快速到达的相关内容的快捷途径。

Contextual Navigation 上下文导航/内联导航

嵌入页面内容的导航 

EX: 页面文字中的超链接

用户需要额外信息的时候,恰恰是他们读文本的时候,不如放一些相关链接到正在阅读的文本里。

Courtesy Navigation 友好导航

提供给用户他们通常不会需要的链接...

联系信息、反馈表单和法律声明的链接通常都放置在友好导航里。

Remote Navigation 远程导航

主导航系统没法让用户满意的时候可以考虑远程导航。

Site Map 站点地图

常见的远程导航工具之一

通常不会超过2个层级的导航(更详细的内容超出用户需求,不然就是结构设计不合理)

Index 索引表

按字母顺序排列的、链接到指定页面的标签列表

对于涵盖了不同主题、大量内容的网站有效(如维基百科)


3. Information Design  “传达想法”

如何呈现这些信息,让人们能很容易地使用、理解信息。

用一种“反应用户思路”、“支持用户任务和目标”的方式来分类、排列目标信息元素。

错误提示是在设计界面是经常要考虑的信息设计问题。

Wayfinding 路标:

结合信息合计和导航设计,帮助用户理解“你在哪儿”&“你能去哪儿”&“哪条路能最快到达目的地”

页面布局:将信息设计、界面设计和导航设计呈现出来,生成页面示意图/线框图Wire Frame

页面布局就是Skeleton这个阶段的最终产物

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,271评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4 60
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • 合并字符串 r来形成原始字符串+不能像c#一样直接连接一个字符串和有关数值。 切片 可以 从头开始也可以倒数计数,...
    在河之简阅读 601评论 0 2
  • 今晚本来想十点就睡的,毕竟明天就要正常上班了,过了两天懒惰的假期,是时候回到工作中去了。 一不小心就跟小伙伴一起嗨...
    南飘阅读 228评论 0 1