UX设计基础入门

青旅半醒 2024-04-01 11:54 48阅读 0赞

## UX和UI傻傻分不清楚 ##

UX即User Experience（不要读作U叉，正确的读音是U埃克斯），强调的是「使用者体验的过程」。使用者体验，是根据使用者的习惯，安排整个网站页面的内容规划，像是哪些区块的内容要先在网站上出现，哪些按钮一定要在哪，重大责任就是要确保产品从这一步流动到下一步符合逻辑。要办到这点，UX 设计师用的其中一个方法就是实施真人测试，观察使用者行为，检查说得出来和没说出来的使用障碍，经过不断修改以创造出「最棒的」使用者经验。例如说创造一个舒服的入门流程给使用者。

很多人会将UX和UI的概念混淆在一起，UI（User Interface）考虑的是视觉的部分，专精于「产品怎么呈现」。他们负责设计每一个与使用者互动的网页或画面，然后确认UI 在视觉上能传达UX 设计师展示的路径。UI可以是将UX理念实践的美学工程师，包括整个网站的颜色、字型、字体大小、配置安排。

下图给出了UX和UI的工作内容的区别和联系之处：  
![在这里插入图片描述][82094abb7702a5afbfdb810bdb808a9f.png]

## UX领域术语 ##

建议先看一下这个简短的介绍视频，了解[什么是用户体验设计][Link 1]。

每一个专业都有行内术语，就好像厨师安排上菜流程称为「打荷」等，短短几个字，就可以归纳出不同职业的主要工作内容。以下就为大家列举10个UX设计师的常用术语，助你一窥UX设计师的日常工作：

<table> 
 <thead> 
  <tr> 
   <th>UX设计师术语</th> 
   <th>工作内容</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A/B测试(A/B Test)</td> 
   <td>将两款带有不同变数的设计，同时开放给特定用户群使用，从而判断出哪个版本能带来更大效益</td> 
  </tr> 
  <tr> 
   <td>易达性(Accessibility)</td> 
   <td>代表使用者能在没有多余步骤的情况下，轻松并顺利到达想要前往的页面</td> 
  </tr> 
  <tr> 
   <td>易用性(Usability)</td> 
   <td>指操作界面设计清晰，用家不用多做思考，凭直觉就能快速上手使用</td> 
  </tr> 
  <tr> 
   <td>卡片分类法(Card Sorting)</td> 
   <td>将UX设计的重要元素逐一写在卡片上，再让测试者进行分类，从而整理出符合用户期望的设计</td> 
  </tr> 
  <tr> 
   <td>人机互动(Human Computer Interaction)</td> 
   <td>研究使用者与设计之间的依赖关系，例如人如何使用设计、设计如何助人解决问题等</td> 
  </tr> 
  <tr> 
   <td>资讯架构(Information Architecture)</td> 
   <td>即透过标签分类、导览系统、搜索栏等元素，来让资讯内容更清晰地呈现予受众</td> 
  </tr> 
  <tr> 
   <td>人物志(Persona)</td> 
   <td>藉由虚构出不同特色的目标用户，让团队在下决策时有更具体的参照蓝本</td> 
  </tr> 
  <tr> 
   <td>线框稿(Wireframe)</td> 
   <td>用以表达产品布局规划、资讯架构、操作流程等概念的草稿，一般较粗糙且低拟真，以黑白灰色阶为主</td> 
  </tr> 
  <tr> 
   <td>视觉稿(Mockup)</td> 
   <td>把线框稿绘制成最终面向受众的画面，但只是一张彩色的静态图片，缺乏互动性</td> 
  </tr> 
  <tr> 
   <td>原型(Prototype)</td> 
   <td>能够真实模拟使用者与产品的互动过程，如按下按钮就会跳转到另一画面，设计非常贴近成品</td> 
  </tr> 
 </tbody> 
</table>

除了上述这些设计内容，UX设计师也需要仔细规划字眼运用和内容铺排，透过简洁易懂的文字，弥补视觉设计上的不足之处，确保用户和开发者之间不存在认知落差，进一步提升用户体验。

## 看看UX的工作流 ##

下图给出了一个交互体验师在设计/优化一套交互方案时可能经历的步骤：前期用户调研→分析数据→开脑洞设计方案→设计原型、测试分析→最终决策并投入使用。注意这个过程可能并不是一蹴而就的，可能会在某个阶段多次修改完善，也可能从后面某一个阶段返回前一个阶段再进行优化改进。  
![在这里插入图片描述][0b66b7fbd65474b3699dfb2c33a41caf.png_pic_center]

## 信息架构 ##

学习视频：https://www.zhihu.com/zvideo/1443656708480057344

[82094abb7702a5afbfdb810bdb808a9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/11ca8bd1cd7043c585d6c40c48264475.png
[Link 1]: https://www.bilibili.com/video/BV1oh41187ew/
[0b66b7fbd65474b3699dfb2c33a41caf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/dea9d287964d4b2b83e289dff97b8aeb.png