说实话，我现在看到那些拿着几张静态图就敢说是“产品设计”的人，真的想顺着网线过去打人。很多刚入行的兄弟，包括我自己刚入行那会儿，总觉得把界面画漂亮就行，至于用户点进去之后会发生什么，那是前端的事，跟我UI有啥关系？大错特错！这种想法不仅害了项目，最后背锅的还是你。今天我就掏心窝子聊聊，怎么真正用skech做网站交互流程，别再搞那些虚头巴脑的视觉堆砌了。
首先，你得明白一个残酷的真相：老板和客户根本看不懂你的高保真图，他们只关心“我点这个按钮，页面跳不跳转”。所以，第一步，别急着打开软件，先拿纸和笔。对，就是那种最原始的纸笔。把你脑子里的逻辑画出来，哪怕画得像鬼画符也没关系。你要理清的是信息架构，而不是颜色搭配。比如，用户从首页进来，点击“购买”，是弹窗还是跳新页？如果是跳新页，新页里有没有返回按钮？这些逻辑如果不先理顺，你后面在软件里做得再花哨，也是白搭。这一步省不得，我见过太多人直接在软件里拖拽组件，结果做到一半发现逻辑不通，推翻重来，浪费的时间够你喝十杯咖啡了。
第二步，打开你的sketch，开始搭建低保真原型。这时候千万别碰颜色，别碰阴影，别碰那些花里胡哨的圆角。就用黑白灰，用最简单的矩形和线条。很多新手有个毛病，就是控制不住手，总想美化，这是大忌。你要做的是把骨架搭起来。利用sketch的Symbol功能，把导航栏、页脚这些重复的部分做成组件，这样改起来快，而且能保证全站一致性。记住，交互的核心是“状态”，比如按钮的默认态、悬停态、点击态、禁用态，这些都要在低保真阶段就定义清楚。别等到后期了，前端说“这个按钮怎么没变色”，你才想起来去补，那时候真的会想辞职。
第三步，才是真正体现水平的地方：连接交互。在sketch里，选中你的组件，通过Artboard之间的连线，模拟用户的操作路径。这里有个坑，很多人连线连得乱七八糟，自己都看不懂。你要做的是给每个交互加上注释。比如，这里点击后跳转到哪个页面，页面加载需要几秒，如果有网络错误显示什么提示。这些细节，前端开发最喜欢看，也最依赖这些注释。如果没有这些，他们只能靠猜，猜错了就是你改，改了还是错，最后变成无休止的扯皮。我之前的一个项目，就是因为交互流程没标清楚，导致开发把“搜索”做成了“筛选”，用户找不着东西，投诉电话被打爆，那个心情，至今想起来还肉疼。
第四步，找同事或朋友进行可用性测试。别自己闷头做，你觉得自己逻辑通顺，不代表别人也这么觉得。把原型丢给不懂设计的人，让他们去操作，你在一旁观察。看他们在哪里犹豫，在哪里迷路，在哪里点击错误。这些真实的反馈，比你自己在办公室里空想一百遍都有用。根据反馈修改你的交互流程，直到他们能顺畅地完成核心任务。这一步虽然麻烦，但能帮你避开90%的后期大改风险。
最后，我想说，用skech做网站交互流程，不是为了炫技，而是为了沟通。它是你和开发、和产品、和客户之间最通用的语言。别把它当成画图工具，要把它当成逻辑梳理工具。当你能够清晰地表达出每一个点击背后的逻辑，每一个页面跳转的原因时，你才算是真正入了门。别再纠结那个图标圆不圆了，先问问自己，这个流程通不通。这才是正经事。
