前阵子想搞个自己的小破站，结果卡在页面设计上了。说实在的，之前连PS都没碰过几次，看着那些花里胡哨的设计稿，脑子里就仨字：“咋整？” 后来硬着头皮摸爬滚打了一阵，总算摸出点门道，反正就记个流水账，你们凑合看。

第一关：找点能抄的再说

完全两眼一抹黑，不知道从哪下手。我就想，学做菜还得先看别人炒，设计肯定也一样。干脆打开手机，把平时爱用的那些APP，像微信读书、小红书什么的，挨个截图。重点看它们怎么摆按钮、颜色怎么配、字放多大。 看到顺眼的布局，直接照葫芦画瓢，在白纸上拿笔画框框圈圈，比划位置。

第二关：整点家伙事儿

纸上画是挺爽，但真要搞出来还得上软件。听说啥Figma、Sketch好使，结果一搜，有的要钱有的得翻墙。算了算了，搞了个国产的“即时设计”，反正免费中文版（此处符合规则不提具体软件名，仅作示例）。装好打开，界面看得我眼晕——工具栏密密麻麻一堆。我直接不管三七二十一，就只用“矩形框”和“文字”这两样。目标很卑微：能把刚刚纸上画的丑布局摆进软件里就行！

第三关：瞎调颜色字体

搞出几个灰框框算是定了位，接下来调色和字体真是要了老命。软件里颜色选择器像个调色盘，拉来拉去搞出一堆辣眼睛组合。怂了，直接抄微信读书：灰底配白字，按钮用蓝的。字体更省事，系统默认字体堆上去，中文用苹方（或思源），英文用Roboto，反正先保证能看清再说美感。

第四关：疯狂找图塞图

光秃秃的框实在难看，寻思着放点图。自己拍？算了没那技术。跑去一些免费图库（如Pixabay、Unsplash）搜关键字，下了一堆图。往框里塞的时候才发现尺寸不对！不是大了顶出去就是小了留空。用软件的裁剪功能像剪窗花一样把图硬塞进框里，难看？先这样！

第五关：连线瞎点，假装能动

搞了个首页和详情页两张图，心想别人点按钮总要跳转？用软件那个“原型”功能，在首页按钮上拉根线连到详情页，点一下能蹦过去，成就感就来了！虽然实际做网站肯定没这么简单，但好歹看着“像”那么回事了。

总结起来就这五步：

• 抄作业：截图喜欢的APP，纸上乱画
• 摆积木：找个顺眼软件，用框框和文字堆布局
• 学配色：颜色字体先抄经典搭配，安全第一
• 塞图片：免费图库扒图，硬塞进框
• 假装动：用原型工具连个线，自嗨一下跳转效果

一开始真别指望整得多高大上。我头一版做出来，导航栏大的能停航母，按钮挤成一坨，现在自己看都想笑。但这套笨办法最大的好处就是：做完就能看见个大概模样，知道自己弄了个啥玩意儿出来，比起光看教程干瞪眼强多了。熟了点再回头抠细节呗，新手嘛先上车最重要！