想学国外网站 UI 设计，却对着一堆英文教程犯愁？看着人家的设计案例觉得超棒，自己动手做却总差一口气？小编当初也这样，收藏了上百个国外设计网站，结果半年过去还是没入门。后来踩了好多坑才摸出点门道，今天就把怎么学国外网站 UI 设计的方法掰碎了说，新手跟着走，至少能少走一年弯路，一起往下看吧！
一、先搞明白：学国外 UI 设计，和学国内的有啥不一样？
别以为都是 UI 设计，国内外的路数差得可不少。举个例子，国内网站喜欢把导航放顶部，按钮做得显眼；但很多欧美网站导航藏在侧边，按钮甚至和背景快融为一体。为啥？因为用户习惯不一样啊。
- 国外用户更在意 “简洁”，页面上字少图大，留白多到你觉得浪费；国内用户就爱 “信息全”，生怕漏看了啥。
- 颜色上也差很多，欧美电商网站常用米白、浅灰当底色，日韩网站就爱用亮粉、浅蓝，看着热闹。
所以学之前得先想清楚，你想学哪种风格？目标用户是哪的？不然学半天用不上，白费劲。
二、3 步入门法，新手照着做就能上手
第一步：疯狂看案例，但别光看不动脑
看案例不是刷朋友圈似的划过去，得带着问题看。小编给你个清单，照着问自己：
- 这个网站的导航放哪了？点进去是啥样的？
- 按钮是方的还是圆的？颜色和背景搭不搭？
- 产品图怎么摆的？是大图单张还是小图一排？
- 文字用的啥字体？大的小的？
推荐几个必看的案例网站，都是小编常逛的：
- Behance：上面有很多国外设计师的作品，分类清楚，搜 “ecommerce UI” 就能出来一堆电商案例。
- Dribbble：偏创意设计，适合学那些亮眼的小细节，比如按钮点下去的动画效果。
- Awwwards：每周评选最佳网站，能看到最新的设计趋势，就是有些案例太复杂，新手看看热闹就行。
第二步：从模仿开始，别害怕 “抄作业”
刚开始别想着原创，先找个简单的国外网站，从头到尾抄一遍。比如抄个博客首页，注意这几点：
- 尺寸别瞎改，人家 banner 图多大你就做多大，按钮位置也别挪。
- 颜色尽量用人家的，用取色器吸一下就行，别自己瞎调。
- 字体也照抄，不知道啥字体？用 “求字体网” 上传截图识别一下。
小编第一次模仿的是个美国的小众服饰网站，原以为很简单，结果按钮圆角大小调了半小时，才和原图差不多。但抄完之后，突然就明白人家为啥这么设计了，比看十篇教程都管用。
第三步：学工具，但别贪多
做 UI 设计离不开工具，但新手别一下子全装上。
- 先学 Figma，免费又好用，国外设计师几乎都用它，教程也多，B 站上搜 “Figma 入门”，跟着做一遍就会基本操作了。
- 会了 Figma 再学个 PS，主要用来改图片，比如调亮度、裁尺寸，不用学太复杂的功能。
有人问要不要学代码？小编觉得新手不用，先把设计做好再说，等后面需要对接开发了，再学点 HTML、CSS 基础就行，不用太深。
三、避坑指南：这些错千万别犯
1. 别光看英文教程头大
很多国外教程是英文的，看不懂咋办？用浏览器自带的翻译功能，虽然翻译得有点怪，但大概意思能懂。实在不行就看国内设计师翻译的，B 站、知乎上都有，不用非得啃生肉。
2. 别忽略 “用户习惯”
比如你学的是日本网站设计，就得知道日本人喜欢在页面底部放联系方式，而且按钮上的字特别小但清晰；学欧美设计，就得记得他们点 “返回” 按钮的频率很高，导航别藏太深。这些细节不知道的话，设计得再好看也没用。
3. 别闷头学不交流
加几个 UI 设计群，把自己模仿的作品发出去让大家评评，哪怕被骂几句也能学到东西。小编之前加了个群，有人指出我模仿的按钮颜色在欧美用户看来太刺眼，后来改了之后顺眼多了。
四、进阶技巧：怎么从 “像” 到 “好”？
模仿到一定程度，就得加点自己的想法了。比如看到一个欧美电商网站用了蓝色按钮，你可以试试换成同色系的浅蓝，看看效果咋样；或者把人家的列表式布局，改成网格状，对比哪个更舒服。
还有个小技巧，找几个目标市场的用户问问，比如你想做欧美风格，就找几个在国外生活的朋友，让他们看看你的设计 “顺不顺眼”，他们的一句话可能比你想半天都有用。
其实学国外网站 UI 设计，没那么难，关键是别畏难，也别想着一步登天。小编从啥也不会到能独立做一套设计，用了差不多半年，中间也放弃过好几次，但每次看到自己做的页面越来越像那么回事，就又有动力了。
所以啊，新手别想太多，先找个案例抄起来，工具练起来，遇到问题多问多查，慢慢就入门了。希望你也能快点找到感觉，做出自己满意的设计！
