发布时间：2021-7-7 分类： 电商动态
的修改一，项目背景
精武门由广州大象健康科技有限公司和阿里体育联合赞助，致力于打造国际MMA职业联赛的顶级平台。
二，设计方向
（1）问题的旧版本已排序
官方代购源码网站修改主要是为了优化旧官方代购源码网站的以下三个问题：a，页面整体风格过于单调乏味
湾战斗比赛的血腥和激情的设计元素不够出色
C。信息架构和界面布局不够合理。同时，现有的页面框架不能满足公司业务的调整和发展，需要重新优化页面的整体组织结构和信息显示
（2）设计目标
a，带有颜色，呈现页面的氛围
湾强调页面质量，提升品牌效应;同时，整个页面在设计元素的使用上应该是一致的
C。调整页面布局;信息显示更合理，主要和次要不同;关键模块可以掌握用户的眼球
三，设计输出阶段
（1）上一期
目标用户将导致设计风格偏差。对于精武门的战斗平台，设计风格需要在早期阶段进行定向研究分析。例如，根据活动的性质，整个页面需要充满激情，热情和紧张。具有这些关键字后，效果可以根据既定目标找到设计方向。在整体设计目标上，官方代购源码网站的设计不仅需要提升品质和品牌感，还要赋予用户感知能力。同时，它需要更多信息来显示和传输信息。因此，有必要确保清楚准确地传达信息。让用户进入页面后，他自然会感受到战斗的激情，激情和紧张。
（2）设计过程
完成上一个定向准备后，下一步是根据信息架构完成元素的基本布局。以下是官方代购源码网站的指南页面和主页的示例：
1.指南页面（目的：在用户进入官方代购源码网站之前，使用本指南快速吸引用户的注意力，向用户展示精武门的品牌形象和活动内容，同时提供快速入口和导航指向目标内容模块。）
在整体效果之前，主要模块布局。不涉及细节，仅用信息块填充匹配的颜色并根据特定模式放置在相应的显示区域中。该页面的宽度最高可达1920px。考虑到不同设备的适应性，在平衡之后，水平区域显示内容的布局宽度为1440px。同时，用户在垂直方向上看到的第一屏幕的内容也将根据设备的分辨率而变化。第一个屏幕的设计尺寸为1440px * 900px。在背景图像的显示形式中，自动播放的短视频用于“渲染”和“渲染”以呈现页面的内容并显示内容，同时“移动”用户的眼睛，运动的组合和静态品牌的吸引力。
根据区域添加内容和详细信息后的最终效果：
2.主页
[旧家]信息架构层面有一些不合理的要点：
一个。顶栏（1）占据太多空间，相对重要的导航栏（2）占据较小的空间，这是不够的。
湾导航条（2）在整个深灰色页面中太弱，不仅块很小，而且水平不够突出;同时，字体不够大，并且与选择状态下的未选择对比度相比，当前页面不强。 。
c，新闻动态（3），事件咨询（4），精彩回顾（5），图册（6）这些模块在内容布局上缺乏亲密感和对比，内容整合也比较混乱，如（4（6）缺乏统一的样式标题，导致内容层次结构中的理解偏差;以及从阅读习惯（从上到下，从左到右），文本被触发用于阅读焦点的顺序，内容考虑到块的大小，这四个内容也存在信息架构布局不合理的问题。
d。从精武门格斗竞赛的内容运营要求出发，主页的信息架构需要从一级优先级，二级优先级，商业性和产品交互逻辑等方面进行重组。
[新主页]与旧主页的问题相比，进行了以下优化：
一个。增加导航栏的高度，同时将精武门标识整合到导航栏的最左侧，不仅突出显示导航栏的信息结构，还可以作为品牌。
湾将导航内的字体大小增加为粗体，并使用块主色红色作为当前页面选择状态。
C。从观众和商业运营的角度来看，观众希望快速获得有关游戏本身的信息，包括最新活动，购票，看游戏的方式，最新消息以及相关的俱乐部和球员，以及官方可以通过此平台将及时快速地向观众提供最新的推送内容，同时获得相应的平台资源版权收入。 d。将每个模块组合成卡片形式，以便信息布局更清晰，内容片段更有条理和亲密。例如，每个最新事件都以卡片集合的形式集成到顶部，以便用户能够及时，快速地获取最新事件。
即根据阅读的顺序以及内容的主要和次要关系，第一个屏幕的头部使用旋转木马的大面积来收集主要事件信息，这比其他静态信息更能捕获用户的眼睛。页;与当前游戏相关的票证相关和直播信息。
f，最新信息，俱乐部排名，玩家排名也是基于卡片整合图形的信息结构，从左到右，从上到下阅读顺序在第一个屏幕的底部，方便用户滚动屏幕同时抓住信息;每个模块和内容本身之间也有统一的标题和印刷风格，从而保持了页面内容的亲密性，对比度，对齐和重复的原则。
G。此外，在使用字体大小，颜色，间距，原色和辅助色时，布局设计也基于亲密，对比，对齐和重复的原则。
四，总结
通过这个系统的项目设计，我也更清楚地知道设计本身不应该盲目追求结果的输出，也不应该在我们得到需求时立即开始漫无目的的设计。设计是一个过程。早期阶段的每一步都应合理地为最终产出做好准备。这种输出可以更好地满足产品的最终目标，避免盲目性和随意性，但从用户体验的角度发现问题。并解决问题。
