![]()
B端设计作品集中的项目展示，往往要包含三个部分的内容，项目介绍，设计分析，内容展示。不管在介绍和分析部分，你是直接跳过，还是写了几万字的论文，最后都无法避免的需要对设计出来的界面本身进行展示和说明。
而这个部分是项目展示中最难的，因为前面的介绍、分析内容只要网上多看多找，就有大量可参照的行文方式和布局排版。而页面的设计因为项目的差异，很难完全照搬别人的设计，所以往往进入界面展示的阶段展示质量就断崖下跌。问题1：展示的页面难以看清
很多展示中界面的实际尺寸根本不足以展示清楚其中的内容，观看者连界面文字都看不清，自然就导致整个模块的展示毫无意义。出现这种问题的主要原因就是原有的画布太大，放进展示画布中的尺寸太小。想要解决这个问题，就两个方面都要优化。一方面设计稿在制作过程中，能小则小，如果内容允许的情况下，我甚至建议你们用 1280px 宽来设计，不仅后续好展示，内容变紧凑更容易提升设计感。另一方面，在放到画布中时，界面的实际展示尺寸尽量保持在不小于作品集宽的 2/3 。比如，作品集使用 1440 px的画布，展示界面就尽量不要小于 960 px 。除了居中放置以外，也可以左右布局，隐藏掉一部分不重要的内容。最后再建议，保持一个尺寸后就尽量不要在展示过程中忽大忽小。
问题2：Mockup 素材的滥用
Mockup 的应用在作品集展示中是肯定少不了的，但怎么用，用在哪，选什么样式是要考究点的。很多界面展示中为了增加画面的设计感，就会强行嵌套 Mockup 样机进去，这并没有提升展示的质感，只是纯粹增加了画面的噪音和干扰元素。样机在展示部分的运用，只建议用在两种情况，特殊的氛围展示页面，和全部页面罗列的收尾，比如下面这些案例。而在中间的展示部分，不建议使用能包含细节轮廓、透视、光影效果的样机（并不绝对，但不会出错）。使用最简单的深色圆角描边，来突出界面区域即可。
问题3：使用大量没有价值的文案
这一步既是文案问题，也是设计问题。在界面展示的阶段，作为观看者主要想要看的就是界面的设计成果，以及对这些界面设计思路的必要解释。但很多时候，设计师会为了让自己表现的更 “专业”，就老是会往上面加一堆文字，且文字内容既拗口又没有营养，既妨碍页面本身的展示，也拉低观看者的评价。这里的解决方式就不仅仅只是设计的问题，而是对全局的把控和对精简的追求。文字减少是必要的，保证最终的显示效果在可读性和设计感中取得平衡。
问题4：页面的衔接非常混乱
展示的页面中，肯定不是每个页面都是一个独立的个体，只要负责单独介绍这个个体的内容就可以了。往往有多个页面之间存在联系的情况，如不同的状态、步骤、流程、阶段，需要将它们共同置入到一个画布中设计。但是这种衔接往往做出来的结果并不理想，看起来特别混乱。一方面是 B 端界面本身内容就特别复杂，高密度的堆叠加上其它文本、装饰、图形就容易乱作一团。另一方面，就是页面间的关联不像C端这么容易理解，引导的方式不对，就会导致观看者根本不想思考页面之间的具体逻辑。避免这样的问题，建议尽量不要关联3个以上的页面，尤其是包含复杂业务逻辑的流程步骤。实际流程虽然可能更多，但要在展示阶段省略掉一些不重要的，只保留关键的、有内容可看和可介绍的页面。要记得作品集展示是展示最突出的设计成果，这些成果是由一个个独立的要点构成，要易于辨识、理解、信服。而不是把作品集变成 PRD 或者交互文档，要观看者逐字逐句参透才能领悟。![]()
在避开以上的问题以后，展开页面展示部分的设计，就建议使用下面的流程：
内准备阶段，就是就是安排你要展示的页面内容和顺序，比如你项目做了350 个页面，肯定没必要全部展示出来，或者有一些非常重复的页面，也没必要每个都放。所以，你要在这个阶段先筛选出要放置的页面。具体应该多少个没有绝对的要求，根据项目和你自己觉得有必要的数量来定，但作为项目展示中最重要的区域，篇幅是不能过少的，一定要确保最少页面展示数量不要低于10个，不然看起来毫无诚意。然后再根据要展示的页面，用思维导图或普通文档工具编写展示的页面顺序，以及对应的介绍内容、文本。比如，在设计 Dashboard 页面时，这个页面包含了比较特殊的布局方法，以及特意提升了某个模块组件的权重，让用户操作起来更容易。或者，在设计表单页面时，针对信息层级做了单独的分析，重新确认从属关系，以及对比老版本，优化输入类组件的宽度，和内容更贴合，提升视觉检索和操作的效率。文章链接：
B端改版｜通过一个表单和详情页入门B端信息设计
B端改版 | 淘宝商家后台千牛表单设计优化
再或者，一个复杂的列表，包含了很复杂的字段信息，就可以介绍怎么重构它的布局，以及压缩展示高度，解决用因为觉得这个页面太乱不想用的问题。如果一个页面实在想不出可以放什么，那就单纯展示页面样式本身，只为它添加页面标题和简单的作用描述。当然，这种情况占比不能太高。举这些例子，就是为了说明，在进入设计阶段前，一定要想清楚每个页面应该展示哪些信息，这些信息必须得是你设计过程中真实想到的，解决的问题，而不要硬编。后续的设计，都需要遵照你前面的思考去完成，而不是做到哪想到哪。然后，就是用线框图完成基本的页面布局，也就是布局原型。做作品集本质上就是做平面设计，排版先行，再去优化里面的细节和色彩，排版决定了整套作品集效果的下限。所以这一步，就是结合前面的顺序和内容，用排版把它们 “优雅” 地展示出来。在排版上，设计感和内容是相互影响的，有时候前面定的文案太少或者太多，都要在实际排版环境下进行优化。同时，要在这个阶段去优化比例、结构、间距、对比的关系，确保整体浏览的效果和谐。完成上面的展示效果后，你就完成了设计工作的90%，最后就可以开始填充图片、界面、背景、色彩和文案了。时间关系我就不做完，理解这个意思即可。
结尾
最后结尾再强调一遍，尤其对于新手阶段，页面展示区域的设计权重是远远高于前面的项目介绍和分析的。因为查看初级岗位的简历，最普遍的做法，都是直接略过前面的内容，直接看界面的设计和思路的解释。所以如果作为初级B端设计师，在项目前半部分实在写不出太多 “废话”，就不要投入过量的精力和笔墨。有大量的初级设计师反而在后半部分应付了事，这是初级市场的普遍硬伤之一。
新一期B端课程开课了，课程和作品集输出方式再次升级，有提升需要的同学快来！
![]()