一网学是国内较早从事远程培训的机构，是较好的网页设计培训基地。创新的模式让在职人员能够工作学习两不误，省去了家里培训点来回跑的时间。让二三线以及偏远地区的设计爱好者能足不出户也享受来自一线城市老师的培训。远程教学可以把上课内容全程录制，这样方便学员课后反复复习，从而让学员队老师讲解的内容真正做到的掌握。 做做——QQ飞车感恩三周年、QQ西游安全中心 下面我们来自己动手试一试。为主题选择合适的“抄现实”物，并对其进行特征提炼，把握内容排版与物的关系，并注意细节搭配，让整体更加深动。 《剑灵》武神塔介绍专题 需求分析 1.主题 是武神就上100层，“武神塔”是剑灵游戏测试新版本中推出的一个特色内容，它是一个比武场，由底层到高层，难度逐层增加。页面的内容主要分为三部分，视频、武神塔副本的介绍，以及七层塔中的BOSS和掉落的宝贝的介绍。需求方希望内容的呈现能够结合武神塔的造型进行表现。 2.排版预想 为了更好的表现主题并结合塔的造型，我们选择使用抄现实的方法，并计划利用塔的造型来装下这些信息。但如果将塔的造型与内容相结合我们将面临三个问题。一，保留些塔的特征；二，文字内容放在；三，梳理几块内容的层次。 3.现有素材 大概理清思路后，我们来看看现有的素材，都说巧妇难为无米之炊，坦若着实无米，那那那就得自己种！开个玩笑，不过对于网页设计来说，真正对到枪口上的素材并不多，许多时候咱都得变着法子玩。 武神塔 一张武神塔的外景，拿到素材的时候它的像素并不高，只能暂时考虑作为背景的一小部分，如果要将内容放置在塔内的话，这个素材的编辑难度比较大。 另外还有两张武神塔的内景截图，图片质量不错，但似乎对这个创意起不了太大的帮助。但姑且先留着。 BOSS 这是每层塔内的BOSS截图，与此类似的这套图一共有七张，这是游戏过程中的截图，所以人物偏小，质量也不如原画和正式输出的3D模型高。而这些个BOSS又是内容中必需给玩家呈现的，所以扬长避短这又是一个难题。 人物 剑灵现有的游戏素材大致可以分为三种：3D、2D、GIF的恶搞Q版小动画。 3D是一个很写实的风格，如果将其与具体的塔造型结合并还要盛放信息内容的话，那需要绘制出与其匹配的精度，一方面操作难度比较大，另一方面也不利于信息的呈现和查阅，由于过分写实，版式的局限性也比较大。 2D的素材相对于3D来说相对更概念化一些，但是要绘制出与其匹配精度的塔也是有一定困难的，而且对于一个小版本介绍专题来说时间也比较有限。 第三类，是剑灵的一个有爱化表现素材，是一些周边的GIF表现，绘制简洁，表现力强，也比较具有情感化。绘制出与之匹配的精度的塔的造型也相对比较容易。确实算是个不错的方向。 4.总结 通过对主题、内容、素材的了解，我们就有了大概的构思。 我们将通过一个简洁的塔造型去承载整个信息内容，并配合以Q版有爱的小动画形像视觉活跃气氛。 每层塔的内容安置在独立的单层塔中，并通过七层塔的组合构成一个高耸入云的塔型 在选定方向的同时也带来一个问题，简约的风格和必需出现的BOSS截图风格匹配？精度和风格之间的差异都会造成视觉的不统一。如果一时找不到答案，我们暂时把这个问题放在脑子的待处理区。策略从来不是万全的，在大方向确定之后，许多细节的问题是在设计中一步步变法求解的。当然，这个方法并不是较好的，但却是我们经常遇到的情况，天时地利，情投意合的情况是少有的，如果要求以万全的策略才开工，那时间和环境都是不允许的，就像那句话么说来着，爱情就像一条河,谁不是摸着石头过河呢?所以在大方向确定后，我们就开始尝试动手了。 设计分解 STEP 1 减法 游戏中，武神塔拥有它复杂的飞檐造型和层次丰富的质感纹理，每层有大小不一的拱门。为了能给信息内容足够的空间，我们将复杂的飞檐造型进行归纳，并暂时去掉了拱门，这样我们也比较明确了信息内容的位置。 STEP 2 分块 接下来我们就需要开始对内容进行分块，我们知道内容大致分为三块，视频、副本介绍、七层塔。由于七层塔的数量较多，为了能使它与介绍和视频内容有区别并保持七层的统一性，我们将它们进行颜色的区分。并在位置上依照塔的物理顺序，由下而上从一层到七层。由于内容较长，每层塔可以做成收纳的形式，以便控制长度。 STEP 3 加法 将拱门重新安置在分层塔的左侧，用来安放每层比武塔的主BOSS，要主视觉的塔顶加入主视觉调节气氛，在背景加入其它的建筑造型。并将主视觉的内容塔置于一个高耸入云的角度，体现了“是武神就上100层”的概念高度。 回头说说先前留下的那个风格匹配的顾虑。降低写实的游戏内截图与相对简约风格画面的冲突感。浏览截图我们发现，它们都是塔内的场景，并且基本上是平视的角度，于是便在画面上开了一道立体的门，将场景安置在门后，一致的视角可以增强画面的统一感。门的微写实表现对截图和塔的两种风格进行了中间过渡，减弱了二者冲突感。 一网学，我的未来我设计。