提升设计效率：模块化设计框架指南

需积分: 10 159 浏览量更新于2024-07-17 收藏 3.68MB PDF 举报

"《模块化设计框架：UI/UX设计师项目指南》是詹姆斯·卡布雷拉撰写的一本专为数字设计师量身打造的实用书籍。在当今的项目开发过程中，设计师往往发现他们的设计作品在交付给开发团队后，最终产品与最初设想存在显著差异。这主要是由于设计与开发之间的沟通不畅和需求理解偏差所导致的。本书旨在解决这一问题，通过引入模块化设计框架，提供一种系统化的方法论来确保设计过程的高效协作。模块化设计是一种将复杂界面分解为可重复使用的、独立的部分（模块）的设计策略。它强调设计的可扩展性、灵活性和一致性，使得每个模块都能独立地进行开发和测试，同时保持整体设计的统一性。书中涵盖了如何规划、创建和维护模块，以及如何有效地与开发者沟通，确保设计意图被准确传递。作者詹姆斯·卡布雷拉在这本项目导向的指南中，详细阐述了以下关键知识点： 1. 模块化设计原则：探讨模块化的理论基础，包括如何确定模块的边界、如何组织模块以提高可重用性和维护性，以及如何确保模块间良好地协作。 2. 设计模式与组件库：介绍常用的设计模式，如MVC（模型-视图-控制器）、BEM（块元素修饰符）等，以及如何构建和管理组件库，以提升设计效率。 3. 设计系统与风格指南：强调设计系统的建立，如何定义一套统一的视觉和行为规范，减少设计决策中的混乱，促进团队协作。 4. 设计-开发协作方法：提供有效的沟通工具和流程，如Figma、Sketch或Zeplin等原型工具，以及如何清晰地传达设计规格，以便开发人员理解和实现。 5. 迭代与反馈循环：如何在设计过程中运用敏捷开发的理念，通过快速迭代和用户反馈，持续优化设计和模块。 6. 案例分析与实战应用：书中包含实际项目的案例研究，展示如何在实际工作场景中实施模块化设计框架，帮助读者掌握实战技巧。《模块化设计框架：UI/UX设计师项目指南》不仅是一本理论指导，更是实践者的操作手册。对于设计师而言，通过阅读这本书，他们可以提升工作效率，减少误解，同时也能推动整个团队对设计质量的把控，从而提高产品的最终用户体验。"

Chapter 1 ■ a Modular Future

Design and Development: Let’s Bridge the Gap

Designers often find themselves in situations where they feel like they are at the mercy of

the developer, often sacrificing concepts due to a combination of technical feasibility and

deadlines. In reality that should not be the case. When it comes to product creation and

iteration, design and development should carry equal weight in the process. Designers

should establish the what and the why, while developers determine the can and how.

Designer answers: What are we building and why are we building it?

Developer answers: Can we build this and how will we do it?

One of the most valuable things that can happen at the start of any designer

and developer relationship is for each side to have a mutual respect for the other’s

responsibilities.

Commonly the old way of doing things involves design at the start, then handing off

comps to developers who then go off and do the work, only to bring the designers back in

the end to make sure things look OK before launch (Figure1-3).

Figure 1-3. Traditional product development timeline

More modern processes, like Agile, suggest that both designers and developers

have a constant feedback loop throughout the entire process, from inception to launch.

Designers focus on the design as the developer is developing it, and they work side by

side (Figure1-4).

Figure 1-4. Modern product development timeline

Chapter 1 ■ a Modular Future

I would suggest taking this modern approach slightly further where both designers

and developers need to understand the utmost basic logic behind the other’s thought

processes: in some cases, maybe even contributing to the tasks of the other throughout

the entire process (Figure1-5).

Figure 1-5. Ideal product development timeline

Should Designers Learn to Code?

This brings me to the great debate in recent years over whether or not designers should

learn to code. To that question my answer is a resounding No.

Designers should be maximizing their focus on the end users of the products they

design. Of course there are many inseparable implications that code has on the core

experience. For example, page load time is a code-dependent variable that must be

accounted for by the designer. As a designer you can’t create designs that would add

unreasonable bloat that hinders the overall experience. For reasons like this, designers

absolutely need to be empathetic to the medium in which they are designing in.

This is in the same way that an architect needs to understand metal, wood, concrete,

or whatever materials need to be used in the buildings they design. Also in the same

way an artist effectively adapts their methods and styles based on the composition of

paint they are using. Acrylic-, oil-, and water-based paints require completely different

techniques from the painter.

The more you understand the medium in which you are designing in, the more

seamless it will be for your designs to make it to production as expected. There shouldn’t

be a constant tug and pull between designer and coder. Designs should be made already

with the predictability of how it will be built in code. By designing with an approach that’s

similar to a coder, you will spend less time figuring out how to make things work and more

time figuring out how to iterate and make designs better. Understanding the medium will

also allow you to be more creative in finding ways to push it in ways that it’s not commonly

being used. That’s where true creativity and innovation will happen. As a designer it

should be your job to bridge the needs of your users with the capabilities of the code.

The best designs are those that are synchronized with the medium.

Chapter 1 ■ a Modular Future

The purpose of design, after all, is not just to make things look different. Design is

meant to solve problems. There is no need to re-create elements that you’ve already

thoughtfully designed and already do the job.

By reusing designs, it will be much easier to gather data and apply updates across the

entire system. These are prime opportunities to take advantage of designs that we find to

be working effectively and iterate on them to make your entire product better over time.

Iterative Design

If you are consistently reusing elements of design from a functional perspective, you will

really see how iteration will consequently be that much easier. In essence it boils down

to the idea of designing one to design all. There is an incredible advantage in minimizing

duplicative efforts when iterating and improving a single individual element that is

repeated across the entire product.

Design should be treated as a constantly evolving system that you can always adapt

to changing conditions. It shouldn’t be looked at as a disposable layer that can always be

scrapped and completely redone at regular intervals. It should be a backbone that you

can build a knowledge base on and constantly improve upon.

Taking the Focus Off Aesthetics

While we will be building in a lot of aesthetics into our framework, our goal is ultimately

about the design. In this book we want to target your design senses, not your aesthetics.

You will learn valuable methods on how to approach establishing your own flexible

design system for your products. You also will learn ways to break down an already

existing design into a more modular system. In the product development life cycle, design

plays a just as, if not more, important of a role as the development. In fact, if your product

design strategy is truly user centered, then it should almost always inform the path to

development, and not the other way around.

Taking Charge

As you make your way through this book, we will establish the basics of constructing a

design that is modular and reusable. We will create a design that works hand in hand

with the medium of code. We will also experience designing in an iterative and flexible

way, which will allow our designs to grow organically and expand with the needs of our

product. Finally, we will focus on the problem-solving attributes of design, decoupling it

from its aesthetic quality.

剩余94页未读，继续阅读

StardustEncoder

粉丝: 0
资源: 10

提升设计效率：模块化设计框架指南

Modular Design Frameworks:A Projects-based Guide for UI/UX Designers

SMACSS(Scalable and Modular Architecture for CSS)

SPA.Design.and.Architecture.Understanding.Single.Page.Web.Applications

Oasys是一个使用Maven进行项目管理的OA办公自动化系统。该项目基于Spring B

peewee-3.15.0-cp310-cp310-win_amd64.whl

Delphi 12控件之FR安装工具24.7z

基于树莓派使用sht20采集温湿度信息，以JSON格式上传至MQTT，MQTT发布开关灯指令，树莓派执行指令操作

数据可视化面板-ECharts.zip

机器人上下楼梯控制系统的设计与实现

nlopt-2.7.1-cp38-cp38-win_amd64.whl

最新资源