产品经理和UI设计师
在讨论力本官网的改版思路
对于力本官网来说，需要着重于力本的设计案例呈现。我们决定从视觉交互、网站架构和内容策划三个方面入手，让访客能快速、准确阅读所需要的案例。
提升视觉效果，提升品牌形象的高级呈现
优化访客体验，提高访客浏览体验和满意度
强化内容展现，提升产品价值的传达效率
01
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
力本网站的整体视觉非常的干净、规整，配色十分严谨， 基本上也没有什么炫酷的动效，
但整体观感上让人非常舒服。
优秀的视觉和交互设计都能有效提升内容传播效率，可是当两者发生冲突时怎么办，到底是视觉上舍弃多一点还是交互上舍弃多一点？
为了最大程度保证页面的美观，同时让更多的案例能够被访客看到，我们在重点页面案例的展示上用了下方这样的可以自由移动的箭头按钮来进行切换。
我们在做视觉与交互设计时，不光要有视觉美感，也有趣味性，加一点轻微的交互惊喜，能够达到意想不到的效果。
在关于我们的介绍中，我采用了类似“页中页”的效果，让访客在浏览中保持对内容的专注。
02
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
XYZ空间轴的设计策略
提高用户体验
我们通常给界面添加三个方向上的轴：X、Y、Z轴。X轴指水平方向上的轴线，Y轴指竖直方向上的轴线，以及Z轴指在二维空间中垂直于视窗平面的轴线。
当设计元素较多的界面时，让元素沿着这一个轴进行布局，就能很好得理清我们搭建构架的设计思路，也使整体的元素展示变得更有逻辑。
X轴上应该更注重内容的延伸以及适配，多分辨率下保持合理布局，将横向增长空间最佳化。
通过Y轴，可以合理搭配翻页，加载等逻辑，可以有序展示更多信息。
从平面的二维到三维空间的架构设计，合理优化模块叠加顺序，提高用户体验。
用户终端分辨率尺寸多样，视窗宽度可变的情况下，案例呈现为重点的网站，X轴上应该更注重内容的延伸以及适配，将横向增长空间最佳化。
比如案例模块，我们就采用这种多栏型的结构展示，这种结构适用于同一界面需要呈现大量元素的排版，当视窗大小被改变时，每个模板的大小也相应地等比拉伸，列数不增加，让内容也能清晰展示。
遵循了以上的适配规则的同时，我们也为此做了适配的界限，当视窗缩小到非常窄时，为了确保访客的正常浏览，页面元素则不再跟随缩小，而是铺满窗口，整体伸缩的呈现。
简单高效的浏览顺序，利于用户快速了解网站信息，降低对内容理解负担，因此网站内页采用符合用户的浏览习惯的的合理视觉动线。
相较于通过点击按钮查看更多，这种瀑布流的展示方式，可以极大提高用户浏览更多案例的可能性，避免了访客因为翻页而跳出。
而且，每一个案例和配图都足够精美，浏览的时候你甚至会感到这是一场视觉盛宴。
这部分我们则从平面的二维到三维空间的架构设计。
一般常见的元素比如有：吸顶的导航、菜单浮层等等，都是Z轴上的元素
b.固定类
c.浮层类
a.展示类
展示层是页面中默认就存在的、不会对其它元素造成遮挡的元素。
这一层的重点，无非是需要将力本最具代表性的建筑设计案例实拍、企业实力等，更全面向客户呈现出来。配合上自动播放的微动效，简短的文案，才能让访客高效吸收到企业核心。
固定类即为固定在页面某处的元素，或滑动页面时会出现，并对a的元素产生遮挡。常见的有吸顶导航、固定表头/列、返回顶部按钮等。
c层则是由b中的元素触发出的或是指向该元素的临时浮层元素，会对a层以及固定元素产生遮挡。临时浮层之间的Z轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高。
03
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
视觉交互视觉交互
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
框架设计框架设计
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
策划内容策划内容
在内容策划中，我们使用结构化思维来设计和分析内容，以了解用户的心理和满足他们的需求。一个产品的成功需要满足一些必要条件，比如“我们希望用户做什么”，以及“用户可以用这个产品做什么”。
我们需要通过从结果倒推的方法，分解影响访客的因素，并找出其中的必要条件。简单来说，就是我们必须做哪些事情才能吸引访客，并实现转化用户的目标。就像增长超人提出的“高层建设营销法则”，要建造一座高楼，屹立不倒需要考虑很多因素，而了解用户需求则是其中最基本的条件之一。
对于用户来说，了解一家企业实力，能成为左右决策得影响元素必然是：案例、品牌竞争力等等。如何将这家建站设计的竞争力有温度得呈现给用户加深印象呢？
对于建筑设计行业而言，能吸引用户兴趣、左右用户决策的必要条件，必然是一个设计公司的设计理念，而这同时也是这个设计公司的专业实力体现。
我们在“力本学院”的版块，如火如荼地开展了“李老师的必修课”、“设计思维课”、“建筑专业课”、“多元选修课”以及“力本说”等多项培训活动。
这些活动不但起到了为设计师开拓思维指点迷津的作用，也极大提升了企业温度，无形中增加了力本的品牌竞争力。
这些理念的输出，可以让访客充分感受到力本在教育建筑领域深耕多年的积累和思考，无形中体现出了专注、专心、专业的品牌形象。
设计团队还运用插画简约的表现形式，通俗易懂的表现手法，直观呈现力本的设计专业度。
项目
复盘会
整个项目下来，我们始终围绕：
视觉、架构、内容策划方向上进行优化。
最终整个网站不光有简洁大气的视觉和细致入微的交互设计，
更重要的是在整体的架构，以及内容的呈现上已遥遥领先于同行，
可以让访客充分感受到这家设计公司的气质，被企业的品牌实力所吸引。
想了解力本设计的服务方案与价格?
关注公众号：增长超人
