系统设计 之 UI信息架构和导航设计 范例：《剑侠情缘3》

sable

你个贱人 不好好上班！

hexagon

LZ把这个改一下
变成一个工具的需求文档
使用这个工具时不用考虑各个定义
能够快速的创建实用好用的界面

那这个东西就非常有用了

不圆

那虽然但是因为所以与其不如？

storm1986

我想看看其他人是如何做这个界面需求描述的，就算是抛砖引玉吧。已经第4页了，期待高人发布。
描述形式暂不讨论，毕竟一般是看团队合作的习惯，但需求完整性是完全可以进行对比的。到时大家再评评吧。

mirwhizz

写个XML，分清独立界面之间的子父关系，
说明label特性（居中、坐标、可否选中、是否有隐藏开关、是否允许输入文字、字体等等），标注临时名称
根据需要图片的数量预留读图label，
独立界面层里加注需要的逻辑模块（说明你要什么功能）

考虑好译文更换的问题(扩展性和通用性)。
画张界面草图，各个label的临时名称挪过来，美化和风格要是有权提议就来些素材或者手绘。
子父关系说明在来张流程图。

扔给UI程序和美工。  

要是搞FLASH界面，独立界面一张草图一张流程图足矣。自己做个SWF文件更佳。

storm1986

mirwhizz: Re:系统设计 之 信息架构和导航设计 范例1：《剑侠情缘3》启动界面

写个XML，分清独立界面之间的子父关系，
说明label特性（居中、坐标、可否选中、是否有隐藏开关、是否允许...

这叫配置文件，是设计的最后一步才做的，与信息架构和导航设计无关。而且，系统设计时能一步到位写配置文件吗？这也太难了吧。配置文件也无法直观地显示UI信息架构和导航。

红色文化

说一个我一直用的土鳖的方法：

1、先在设计文档中把系统里用到的界面都罗列出来，做一个流程图给自己定一个基本的规划。（构思的过程尽量认真，起码两天打底。虽然游戏的界面其实一般都是单线条，毕竟整复杂了老板会骂的，呵呵）
2、然后按自己的规划从头开始，一个界面再一个界面用visio图做出来，并且罗列到文档中去。
3、每一张visio图出来的时候，还要对界面的每个按钮标注一下，让读者知道这些文字和按钮图标都是怎么回事。
比如“xx按键”：点击后将对界面中的xxx按xx方式排序。（把界面做出来并且表明清楚内容是体力活，而且之前构思不详细的地方也会随之暴露出来）
4、检查一下，考虑文档的直观性。费解的话就再花和用在制作上的同样多的时间来改。不要害怕别人的评价，嘴巴上可以不服，心里一定要考虑别人的看法。
5、要有耐心，花一周到两周时间去准备一份文档吧。也不用带上什么神秘的高科技词汇，用最简单的最通俗易懂的手法去说明内容是最好的（或者把那些个高科技词汇用通俗易懂的语言表达出来吧）。到时候你会发现这种东西砸门威力比那些什么灵感突来、一两天搞定的东西强很多。

努力~！奋斗~！希望这些小小的建议能对楼主有用，一个也曾经被无数公司鄙视过的追梦人飘过。

storm1986

红色文化: Re:系统设计 之 信息架构和导航设计 范例1：《剑侠情缘3》启动界面

说一个我一直用的土鳖的方法：

1、先在设计文档中把系统里用到的界面都罗列出来，做一个流程图给自己定一...

这篇文章其实只是一半，由于此论坛上传图片的功能失效，所以没发后半段。我在后半段已经了提到了你说的工作。
http://hi.baidu.com/storm1986/bl ... e88db66d811919.html

你说是属于UI布局和属性配置，做得细当然很好，但恰好是忽略了UI元素之间的关系、以及导航的作用。
因为要直观地表示各项内容之间的关系，最好就是用图。文中的图，关键就是解决UI元素关系描述的问题。一旦把图拆散，需求描述就不直观了。
详细内容请见：http://hi.baidu.com/storm1986/bl ... 3f48d863d986fc.html
这篇附图举了两个例子，都是说明UI元素的关联性的。

mirwhizz

storm1986: Re:系统设计 之 信息架构和导航设计 范例1：《剑侠情缘3》启动界面
我想看看其他人是如何做这个界面需求描述的……

xml你可以最后在写。但实质上UI的设计要求无非就两种：1表现力。2实用性。

表现力，图片方面给参考素材，手绘也可。
        字体、颜色等等完全可以由参数来调整，你只要把握好参数的范围不就OK了？即便是FLASH的UI，可用参数还是很多的！

实用性，功能方面，代码还得程序来写，逻辑还是流程图来的直观。（直观就是实用，给使用者或者阅览者造成的使用负担降低到最小就是实用性的一部分。）
        布局方面，WEB布局就是WEB布局，讲求排版一样的东西，层次、类别分明就行。操作布局的实用方针无非‘提示’，只要与镜头效果放在一起：尽可能的避免遮拦视觉有效区并且可以突出提示功能就OK。所以这边更应该研究镜头和视角。（我看到市面上那些2D游戏2.5D游戏全‘借鉴’WOW的UI设计就火大。D3都有视频了，咋不‘借鉴’D3呢）
         
话说，我提需求的时候就是LZ意义上的‘配置文件’，实际上在某些情况下连跟进都不用（求证请去问剑圣的小弟）。如果你坚持我说的东西不能称之为需求，（XML给程序调试以及添加逻辑，草图给美术要素材，流程图保证按你的意图实施）

< 那么我戴答非所问的帽子！
  要么请LZ戴上语焉不详的帽子！
  

snowcraft

spy: Re:系统设计 之 信息架构和导航设计 范例1：《剑侠情缘3》启动界面

看到标题以为能看到有用的案例分析。。。。。sigh，结果被骗进来了。抱歉即使你召唤我我也没看懂。
storm你...

[em3]spy都这么评了我还是不看了~ 不过lz说的两本好书收录了。