最近琢磨着搞一个网页商城，不是啥大项目，就是帮朋友弄个小店面，顺便自己练练手，记录下这个过程，免得以后忘。

准备阶段：想明白要啥

一开始挺懵的，商城这玩意儿可大可小。我先没急着动手，花点时间跟朋友聊，也自己琢磨：

• 这店主要卖东西多不多？
• 主要想卖给谁？年轻人？还是特定圈子的人？
• 用户来，咱希望他们干随便看看？还是来就下单？

想明白这几个问题，心里大概就有谱。决定先从简单的来，别整那些花里胡哨的。东西不多，目标用户也比较明确，那就主打一个清爽、好用。

动手画草图：搭个骨架

不想一上来就用电脑搞，那样容易陷进细节。我还是喜欢老办法，拿支笔在纸上涂涂画画。先把主要的页面，比如首页、商品列表页、商品详情页、购物车这些，大致框出来。

首页嘛得显眼，放点主打商品，搞个搜索框是必须的，方便人直接找东西。导航条也得清晰，让人知道能点哪儿去看分类。

商品列表页，就考虑是一行显示几个商品，图片要多大，价格、名称怎么摆放看着舒服。

商品详情页是重点，图片要大！要清楚！然后是规格、描述、价格、加入购物车按钮，这些都得安排明白。

购物车和下单流程，这个我琢磨挺久，怎么让人觉得方便，别一步一步太麻烦，但也别漏啥关键信息。先把最简化的流程画出来。

视觉设计：定个调调

草图差不多，就开始考虑样子。朋友没啥特别要求，我就想着，既然是小店，东西也不追求啥奢华感，那就弄个干净、简约的风格。背景用浅色，字体选个阅读舒服的，别用那些艺术字，看不清。

颜色搭配也尽量简单，主色调用一个，辅助色一两个就够，免得看着眼花缭乱。按钮、重点信息用醒目点的颜色，引导用户去看、去点。

图片这块儿，跟朋友强调，商品图一定要拍好点，或者找质量高的图，这玩意儿太影响观感和购买欲。

抠细节：用户用着顺不顺手

光好看不行，还得好用。我把自己当成第一次来的用户，模拟着去浏览、去搜索、去加购、去下单。

搜索框是不是够显眼？搜索结果准不准？（虽然设计阶段不涉及具体实现，但位置和样式得考虑好）

导航分类是不是清楚？点进去容不容易找到自己想要的类别？

从看到商品到加入购物车，再到去结算，这个过程是不是流畅？有没有多余的步骤？会不会让人觉得烦躁？

我还特别注意移动端的显示效果。现在好多人都是用手机逛，所以页面得能自适应，在小屏幕上看起来也不能乱七八糟，按钮得够大，方便手指头点。

最终成型（设计稿）

反复修改几次草图和初步的视觉稿，把一些自己觉得别扭的地方调整。比如一开始导航栏内容有点多，后来砍掉一些不常用的；商品列表的间距也调几次，让它看起来更疏朗。

算是弄出一套自己还算满意的设计稿。包括主要的页面布局、配色方案、字体选用，还有一些交互上的小细节考虑。虽然离一个真正能上线的网站还有距离（毕竟后面还有写代码的事儿），但至少在“长啥样”、“怎么用”这个问题上，已经有一个比较清晰的蓝图。

整个过程就是这样，从一头雾水到慢慢清晰，不断地问自己“这样行不行”、“那样会不会更好”，挺费脑子但也挺有意思。实践出真知嘛不动手永远不知道会遇到啥问题。