Recently, in the project, I encountered the problem that the connection between requirements, UE, UI and front-end work is not smooth:
- Which layer of requirements need to be analyzed before front-end design?
- Which documents can support front-end design?
- What is the structure and specification of these documents?
- And, to what extent can the front-end design enter the development stage?
In order to solve these problems, referring to some articles on the Internet, the product design process is simply summarized into the following content
1. General product design process
2. Cognitive analysis as I understand it
Here we can summarize the general methods of analyzing things: the process of in-depth, analysis (divergence), focus (convergence), and expansion
According to the characteristics of our project members: product, demand, UI/UE (one person takes care of it), front-end development, server-side development, testing
The analysis process before development is understood as the following figure
3. My understanding of the interactive prototype stage
| core mission |
Common Criteria |
my understanding |
| Conceptual Model Analysis |
A conceptual model is a systematic and structured description of the structure and operation of a product
• The designer communicates the design model to the user through a series of visual cues, as well as the use process, and finally converts it into a user conceptual model
|
Here is just a systematic and structured description (wireframe) Make up the structure (static): division of pages Definition of page content How it works (dynamic): type of interaction Jump process |
| functional structure analysis |
Interactive component design Structural relationship between components |
The function of the UE phase is different from the requirement phase and should be understood as a component Add components step by step according to their functions to form a component library Structural relationship: complex components are composed of simple components |
| Use scenario analysis |
Key functional chains experienced by a typical scenario |
Verify that the component library can meet typical scenarios |
| Interactive process analysis |
Support key operation procedures of usage scenarios (mouse click steps, screen guidance paths, etc.) |
The action specification should correspond to the systematic design of the action part of our acceptance list |
| Information Architecture |
Number and type of controls Logical and organizational relationship between controls The user understands the function behind the component through the component |
Architectural Hierarchy of Component Libraries |
| Prototyping |
All interfaces form a complete prototype that can simulate a product |
4. My understanding of the visual design stage
The concepts in some articles in the interaction design stage are more perceptual, and it is a little difficult for me, a pure science student, to understand, so I didn't do much interpretation, just rely on my understanding.
| core mission |
Common Criteria |
my understanding |
| Design positioning |
Define product character and give emotion |
|
| style exploration |
Styling products based on mood boards, intuition |
• Mood boards inspire and explore user experience with images
• Resolving "not what I want" issues
|
| visual design |
Visual Design and Evaluation Iterations |
•对已有原型安照既定风格实现视觉效果
•交付规范和标注
|
| 评估 |
||
| 输出交付物 |
界面标注、规范 |
上述部分参考文章
五个阶段，了解产品设计流程：http://www.woshipm.com/pd/487017.html
用户体验UE与用户界面UI设计：https://blog.csdn.net/playkid123/article/details/44562231
UI/UE设计流程：https://blog.csdn.net/bingdianlanxin/article/details/45674441
五、交互说明文档
1、文档的结构包含以下内容：
- 封面
- 版本说明
- 优化目录（需求优化的信息）
- 修改记录
- 内容目录
- 产品框架
- 页面流程图
- 页面展示及交互说明（核心内容）
- 封底
参考：BAT如何做交互原型设计文档 https://wenku.baidu.com/view/71f4e5e6581b6bd97e19ea08.html
2、交互说明都包括什么内容
- 字符限制：是否要做限制？多少字出现截断？截断后是显示为省略号还是不显示？注意中英文不同
- 链接具体化：不一定是具体url，但要给出线框图或demo的链接
- 交互细节
- 表单校验
- 浏览器兼容性
参考：手把手教你写交互设计文档 http://www.woshipm.com/ucd/3809.html
六、视觉设计规范
一个移动端APP的视觉规范示例范文，内容、结构可供参考
规范实例（APP）http://www.xueui.cn/tutorials/app-tutorials/app-code-examples-with-ui-design-method.html