1、剑灵核心鉴赏测试
需求分析
 
这是一个问卷调查专题页面，由九道问题组成，由于在产品处于初期的少量放号测试期，产品整体的宣传偏向视觉化。问卷调查的整体题量也比较小，这样的需求给予了设计师比较大的空间，一来可以对问题进行图形化表达，二来剑灵的游戏对机器的高配要求让网页设计可以进行许多更宽屏的视觉表现。在这种情况下，我们选择了中心定位，两侧自适应全屏视觉表现。我们将内容规划如下。
 
设计分解

1.交互修整

首先我们将主SLOGAN和每屏重复出现的长篇文字整体规划到独立的首页，这样可以让玩家在回答问卷时尽量少的受干扰，也可以让画面更加简洁。
第二，设计一条问题导航，让玩家对整体的题量有一个预估。这样不容易因为害怕题量太多而中途放弃，用户也可以通过题目导航快速切换题目。
第三，在顶部设置常规外链和用户登录及用户信息。除了功能上的用处还能够为我们假全屏视觉提供一些定位的视觉点。
2.中心视觉定位

中心视觉以问卷信息为主，视觉集中于1000宽度以内，标题由块背景和系统文字组成，可以由程序控制定位。在1000以内中心视觉的顶部保留出与左右按钮高度一致的空间，主要是为了保证在自适应过程中不会重叠干扰。
3.全屏自适应设置

页面的全屏效果主要由四个部分承担，一是问卷导航，它突破了1000的宽度，小屏用户使用时选择当前题定位。这样在满足大屏用户视觉效果的同时也能满足小屏用户的功能使用。第二个全屏适应的效果是页面顶部的交互按钮，它根据屏幕的宽度始终保持在页面的两侧。第三，是页面的背景，页面中部有一段可重复延展的渐变区域，可以根据屏宽自适应。
 
1920和1024视觉效果展示效果如下：
页面展示
2、剑灵专题
需求分析

这是一个职业技能命名征集页面，技能以职业分为五大类，每个职业有二到三十个左右的不定数量的技能，产品希望通过个页面一方面能够征集技能名字，另一方面也可以起到宣传产品职业和技能的作用并对产品产生一定的兴趣。从目前的交互稿来看，内容一次呈现比较多，层次感会比较弱，其次，如果依现在的交互稿设计出来的页面，玩家看到的多为由技能图标组成的小豆腐块，视觉效果较弱。为了改善整体交互的层次感和视觉性。我们做了以下的的交互修整和优化。国内优秀网页界面赏析
 
设计分解
1.五大职业按钮的自适应

五大职业按钮将人物形像与文字居一侧对齐，这边选择了右侧，这样在页面重构的时候可以比较简单选择向右侧延展或收缩图片进行定位，在1000的宽度以内，我们选择至少展示职业名称和职业形像。按照这种方式，左侧固定宽度为300像素，当屏宽1920像素时，每个职业人物的按钮的宽度为384，当用户屏宽为1000时，职业人物按钮的宽度则减为140，以此类推。
2.技能图标内容的自适应


技能图标的自适应是通过列数来改变的，每个图标的宽度不变，通过列数来自适应屏宽的大小。当屏宽为1920像素时，图标显示为三列，宽度为600像素。当屏宽为1000像素时，图标显示两列，宽度为400像素。设置1280像素为图标列数的分界点，大于1280像素设置三列，小于1280设置两列。设计图如下。
页面展示
剑灵不删档测试
需求分析

这是《剑灵》不删档测试的交互稿，在写这本书的时候《剑灵》刚刚结束了第三次内测并在两个月后迎来不删档测试，整个首页和子页的设计、重构、开发以及内容编辑上线大概是两个月时间，这算是一个相对宽裕的预留了时间，对于设计师来说就有更多的时间来思考。大家都知道产品越接近后期，信息资料就越多类型更多样，关系到的合作和利益互助也更加复杂，由于信息的增多视觉表现的空间变得狭小，不删档到公测后的区别于期待或预告时期的视觉化，后期的多以资料梳理为主。通常的格局正如上图一样，而设计在这样的交互底下相对还是比较难做到突破的。如何在这样一个传统的瓶劲下到一个突破口，并达到形式与信息的完美结合呢？响应式网页是一种趋势，在这一年里，也有许多优秀的响应式设计的案例，但面对信息量如此之多，信息类型如此多样化的首页来说，确实很难到一个平衡点。为了形式而形式的设计肯定满足不了如此功能化类型的页面。一个以信息和资料为主的页面，我们就必需从这根本出发才能到出路，于是我们从形式表现逐渐转向信息梳理，在这里十分感谢同事高立的帮助，讨论是
能够激发灵感和热情的方式，我个人比较倾向于两到三个人的互动讨论。在这里，我们将讨论总结为以下几点。
 
设计分解
做为一个相对综合性的网页，它视觉和交互设计关系到许多的因素，由于本章节的主题是宽屏大视野，所以在这个部分我们主要针对的响应式在视觉设计方面进行解析，关于的视觉表现、交互梳理以及内容归纳等部分就不在此做细致分析。
 
1.大布局
根据信息内容和剑灵的视觉特点我们选择了居左对齐右侧延展的方式。这样即可以方便延展，也可以让剑灵游戏引以为豪的人物视觉得到充分的展示，增加游戏性。另外首屏的内容也可以大大增多。当然主要的难点也集中在右侧的响应式设计.
2.倍数单元格框架
3.传统板块大变身
（1）4倍单元格
由于这两块信息的重要性，我们将其排放在右侧流动版块的黄金位置，也就是左上的位置，不论页面如何流动它们都稳居首屏，呈现一个半固定的状态。
 
 
（2）2倍竖条单元格
这块信息是原交互中的职业介绍，由于职业的介绍主要是人物展示为主，所以我们选择了长条形的板块以满足其展示性的要求。
    大家可以看到这边的交互和内容都有做了比较大的改动，将职业和种族进行联合互动，在首页上删去了具体职业的合击部分，将其移到子页内。这样的调整使主要信息突出，将复杂而相对二级的信息移至内层级。内容的逻辑上更清晰，视觉上也可以得到充分展示。
（3）2倍横条单元格
    道具的板块也做了一些交互的变动，大家可以参照原交互进行对比。这里的变化主要综合考虑了游戏中的道具、服饰、礼包都是固定大小的方块图标，而且一次公开的个数会比较多，于是我们选择了长条的格局，并设置左右的按钮进行更多的预览。
（4）1倍单元格
    1倍单元格我们选择了出现频率最高的活动广告，以及在资料中等级相对次要一些的副本和壁纸、原画等视觉资源，1倍单元格在流动上更加灵活，限制较少。一些资料根据其重要程度，将次重要信息进行层级收纳，放置在左右箭头中。
（5）0.5倍单元格
    0.5倍单元格在这个案例中是为了方便为媒体LOGO提供合适宜的排板空间而另外设定的，虽然它在视觉中呈现的是一个0.5倍的状态，它在流动过程中间是绑定状态，也就是两个0.5倍单元格合为一个1倍单元格进行流动。
4.信息的类别梳理
    由于版块形式较为相近，而且的内容又相对丰富，所以我们对内容进行了两个大的类别划分，主要是活动和资料两个大的类别，通过版块颜的设定进行归纳，方便玩家的快速浏览。
（1）资料型版块
    资料型版块相对于活动来说更新频率较慢，属于长期保持性信息，所以选择以白为主，让其显得相对舒适。职业、种族、副本、道具等都属于资料型信息，所以这里做了以白底为主的设定。
（2）活动广告型版块
    广告型版块更新频率较高，而且需要更加突出和刺激的视觉引起玩家注意，起到广告效果，所以这边选择了深调子进行定义。
通过颜调性的划分，用户经过一段时间的使用，便可直接通过扫描了解信息的大体类型。也可以在一定程度上弥补板块在流动过程中产生类别跨越的问题。
 
页面展示

1920宽度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。