关注我们，一起解锁设计的N种玩法👇
做设计多年的设计师朋友，在门户与专题页的设计工作中，你是否也常常被这些场景困扰：
当遇到不明确客户具体的想法时,完全依赖创造性思维,往往不能做出符合需求的结果,这就给我们工作带来很多不必要的返工。
因此，我们需要借助一些科学的工作流程和工具来帮助我们提升效率和设计的准确性。
💡｜如需了解“移动端”相关设计规范，请点击查看 👉 干货分享！超全面的移动端UI设计规范
什么是门户网站及专题页？
在开始探讨具体的设计步骤与方法之前，我们首先需要明确两个核心概念：门户网站与专题页。理解它们各自的定义及本质区别，是后续所有设计工作的基础。
（图1：门户&专题页）
门户网站
原意是指正门、入口，现在多用于互联网的门户网站、移动互联网的门户网站和企业应用系统的门户系统，是指集成了多样化内容服务的Web站点，又称为网络门户。我们工作中接触比较多的是企业或者机构的内网及外网；
专题页
专题页是一个内容聚合页，其信息来源于同一主题的内容(文字，图片，视频等)。有共同性的文章组成的集合体，它也包含了banner、海报及线上线下的一些其他的设计。
💡｜简单来说，如果说门户网站是一个功能齐全、四通八达的“城市广场”，那么专题页就是广场上为某个特定节日或活动而搭建的“主题展馆”。明确了这一定位，我们才能更有针对性地展开后续的设计工作。
设计思路及方法
标准设计流程可总结为以下四步：
（图2：设计步骤）
1、分析需求及价值
🔽
（图3：情绪版）
情绪板：情绪版本质在于将“情绪“可视化,把抽象的难以言表的“感觉”变为具体的物像的表达,并通过图片集合的形式将其表现出来.情绪板对我们的设计思路起到了一个很好的梳理作用，可以很高效的阐述你的设计想法,在不需要输出设计页面的情况下,让团队或者客户了解到产品未来会呈现的设计风格。
如关于运动风格的产品,情绪版:
🔽
（图4：情绪版-运动风）
如关于科技感的产品，情绪版:
🔽
（图5：情绪版-科技感）
2、提炼关键词
🔽
通常将关键词分为”原生关键词“与”衍生关键词“两种：
（图6：关键词）
原生关键词
通常是抽象词汇,简单来说就是用户希望我们的设计具备哪些品质，也就是我们的产品的核心价值所在，首先搜集原生关键词，包括各个方面，可以是感觉相关的，也可以是场景相关的，还可以是名词相关的，如理财产品的词汇是“友好”“品质感”“安全”“可靠”等等，这些词汇有时客户会提到，但更多的时候需要我们自己去深入了解产品，分析同类竞品，从中获取客户或者用户想要的这种抽象的感觉，把它汇聚成我们想要的原生关键词；
衍生关键词
把抽象词汇通过联想具象化,通过头脑风暴,将抽象的词汇用具象的物品来表达.如:“安全”可以联想到,密码锁、保险柜、盾牌、等.这个阶段需要我们发散思维,联想到越多越好，这一步是针对上一步的关键词进行筛选，再对筛选过后的关键词进行发散和联想，这样能获取更多的灵感。
项目实例一
如在为政务系统登录页面设计春节主题皮肤时，——我们可以首先从春节传统文化中提炼出一系列核心关键词：如红色、烟花、红包、对联、中国结、热闹、团圆饭等一些关键词。然后再对关键词进行进一步的细化根据这些关键词我们可以找到与场景、元素、字体、色彩等相关的各种图片素材...
🔽
👇👇👇
（图7：春节主题皮肤）
项目实例二
如我们要做一个女神节活动的电商专题banner，关于电商及女神节日我们可以联想到如：如粉色、花朵、红包、礼品、福利等一些关键词，然后再对关键词进行进一步的细化和联想得到更具体的关键如粉色，活力等，根据这些关键词我们可以找到与场景、元素、字体、色彩等相关的各种图片素材。
🔽
（图8：专题banner）
3、建立情绪版
我们利用原生关键词及衍生关键词得到了我们想要的词汇，然后我们就可以去通过搜索这些词汇搜集相关的图片。将图片集合进行分析整理，就得到了我们想要的情绪板。
（图9：情绪版）
4、得出设计风格方向
产出情绪版只是我们整理视觉思路的一个过程，我们使用工具的目的是帮助我们得出结论,通过情绪板分析整理出视觉风格的定位才是我们最终要输出的结果，情绪板的终点不是图片合集，是通过图片合集挖掘出来的设计风格和主色调的提取，视觉风格可以分为五个方面进行整理：颜色、字体、构成、图形和质感。
（图10：设计风格组成）
色 -> 主色调
在设计之前，有时客户会提供品牌色，我们就直接使用品牌色，但是如果客户没有提供的情况下就需要我们通过情绪板提取品牌色，如通过图片集合我们可以发现热闹、盛典、惊喜等可以用橙、红等暖色调；科技、安全可以用蓝色。
（图11：主色调）
🔽
💡｜一个小技巧：假如现在我们得到这样一个情绪版，那么如何提取主色调呢？——可以通过将图片高斯模糊然后吸取其中的几个比较明显的颜色然后再做进一步的分析和对比，从而推出主色调。
（图12：提取主色调）
构 -> 构成、布局
画面整体的布局在设计风格中也起着关键性作用，入口的划分、信息层级的处理，容器的大小都要符合产品调性。
（图13：构成与布局）
🔽
A、通栏
✅｜优点：比较简洁大气、有条理和空间感，一般官网首页及一些高端的产品的应用较多；
（图14：通栏）
B、区块
✅｜优点：分模块、层级分明，内容清晰，分模块，块错落有序；
（图15：区块）
C、曲线
✅｜优点：具有引导性，且样式自然，虽然不符合传统意义上的工整，但是整体形散神不散，给用户带来活波的感觉；
（图16：曲线）
D、倾斜
✅｜优点：主要的特点就是动感、活力且有节奏感，打破中规中矩的定式，多针对于年轻用户群体；
（图17：倾斜）
E、自由
✅｜优点：也称不规则式，灵活度高，整体大气，设计感比较强，同时难度也比较大，多用于一些想突出个性设计的产品。
（图18：自由）
字 -> 字体的选择与排版
不同调性的产品用到的字体差异会非常大，不同的字体可以传达出不同的情绪，字体分为衬线体、非衬线体、手写体、书法等；字体的颜色，粗细、大小、排版的呼吸感等都会影响设计页面的基调，通过整理分析情绪版，找到我们字体的设计方向。
（图19：字体效果）
💡｜常用免费字体：常用商免字体：优设标题黑、庞门正道标题题、字由文艺黑、思源黑体、思源宋体等。
（图20：常用免费字体）
形 -> 图形、形状
通过情绪版我们可以找到相应的图形、卡片、按钮的形状、通常来说面对不同的用户按钮及其他元素的圆角大小也不尽相同。圆角更易被人察觉及感到柔和；直角更显规范庄严及冷静，两者各有利弊，通常也需要根据情绪版去选择。
（图21：图形与性状）
质 -> 质感、光影
在以上主色调确定好以后，构图排版，文字处理等几个步骤处理以后，大致的风格已经差不多了，这一步就需要我们来整体提升页面的质感，比如元素的光影、明暗关系、投影等等使其符合当前页面主色调映射的环境光氛围，以达到提升页面质感的目的。
🎉 以上，是关于门户/专题页设计思路与方法的全部内容。
在这个AI生成界面只需几秒的时代，设计的价值愈发凸显于策略思考与底层逻辑。唯有跳出执行层面，深耕设计方法，才能守住专业底线～
关注我们不迷路，下期见！
-END-
关注我们，一起解锁设计的N种玩法👇
再扒点料
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
