Embed Size (px)
Citation preview
OutlineWhat is software architecture?Typical software architectural stylesSpecific software architecturesDistributed system architecturesSoftware architecture patternsDesign patternsUI designs
1 What is Software Architecture?Clements, Paul; Felix Bachmann, Len Bass, David Garlan, James Ivers, Reed Little, Paulo Merson, Robert Nord, Judith Stafford (2010). Documenting Software Architectures: Views and Beyond, Second Edition. Boston: Addison‐Wesley. ISBN 0‐321‐55268‐7.
“the high level structures of a software system. It can be defined as the set of structures needed to reason about the software system, which comprise the software elements, the relations between them, and the properties of both elements and relations”
This definition emphasizes the important role of “software elements”
1．PatternThe elements of this language are entities called patterns. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice. — Christopher Alexander Architectural pattern: a standard solution to architectural problems in software engineering ("strictly described and commonly available"), e.g.: OSI reference modelDesign pattern: a standard solution to common problems in software designGang of Four – 23 design patterns
Software Pattern and Style
2．Software Style"An architectural style defines: a family of systems in terms of a pattern of structural organization; a vocabulary of components and connectors, with constraints on how they can be combined The main difference is that a pattern can be seen as a solution to a problem, while a style is more general and does not requirea problem to solve for its appearance.：
3．Software Frameworka software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user‐written code, thus providing application‐specific software. A software framework is a universal, reusable software platform to develop applications, products and solutions. Software frameworks include support programs, compilers, code libraries, tool sets, and APIs that bring together all the different components to enable development of a project or solution.Typical examples include MVC and Struts
The input data go through a series of calculations and operations and evetually form the output dataExamples: Pipe/filter, batch sequential processing
Data flow
2. Typical Software Styles
Call‐Return1．Main program/subroutine
divide the functionality into a control tree
2．Layered architectureeach layer provides a set of services to the layers aboveencapsulates a set of implementations and lower‐level servicesrelies on services from the layers below
Reference Model
Designed for specific application domains; an ideal software architecture that include all necessary features
3. Warehouse
Hypertext, database, blackboard systemData warehouse situates at the centre of the architecture, othercomponents interact with it for CRUD
4 Distributed System ArchitecturesCentralized computing era highly rely on the mainframes and high‐end servers
After 1980s, personal computer becomes available that eventuallyhelp generate the distributed computing model
Characteristics Disadvantages
Simplest distributed system model.System composed of multiple processes which may (but need not) execute on different processors.Architectural model of many large real‐time systems.Distribution of process to processor may be pre‐ordered or may be under the control of a dispatcher.
Multiprocessor Architecture
The application is modeled as a set of services that are provided by servers and a set of clients that use these services.Clients know of servers but servers need not know of clients.Clients and servers are logical processesThe mapping of processors to processes is not necessarily 1:1.
Client/Server (C/S)
Thin Client
Fat Client
Example: Internet Banking
Summary of C/S Architecture
Distributed Object Architectures
Advantages
Example: data mining systems
model‐view‐controller, that separate user inputs, data model and data representations
5 Architectural FrameworksMVC
6. Design Patterns
What is design pattern？
Creational
Structural
Behavioral
To solve a category of software problems and make it reusable
In the class and object level
More in the high‐level design stage
Key idea is to add the abstraction layer, to separate the variants from the invariants
What is Design Pattern?
Pattern Name: we use to describe a design problem,
Problem: that describes when to apply the pattern, the causal relationship of the problem and potential preconditions that have to be satisfied in order to use the pattern
Solution: that describes the elements that make up the design
Consequences: that are the results and trade‐offs of applying the pattern.
Basic Elements of A Pattern
SOLID Principles
"software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification“
such an entity can allow its behavior to be modified without altering its source code.
This is especially valuable in a production environment, where changes to source code may necessitate code reviews, unit tests, and other such procedures to qualify it for use in a product: code obeying the principle doesn't change when it is extended, and therefore needs no such effort.
Inheritance
Open/Closed Principle
• every class should have a single responsibility, and that responsibility should be entirely encapsulated by the class. All its services should be narrowly aligned with that responsibility.
• The reason it is important to keep a class focused on a single concern is that it makes the class more robust
• Example:• interface Modem{• public void dial(String pno);• public void hangup();• public send(char c);• public char recv();• } • Modem class has 2 responsibilities: connection and communications,
should be separated
SRP
LSP
Substitutability states that, if S is a subtype of T, then objects of type T may be replaced with objects of type S (i.e., objects of type S may be substituted for objects of type T) without altering any of the desirable properties of that program (correctness, task performed, etc.).
LSP is a particular definition of a subtyping relation, called (strong) behavioral subtyping
Example: is penguin a bird? Biological: yes, it is.LSP: no, it is not, since it cannot fly.
DIP
High‐level modules should not depend on low‐level modules. Both should depend on abstractions.Abstractions should not depend upon details. Details should depend upon abstractions.
ISP
No client should be forced to depend on methods it does
not use.
ISP splits interfaces which are very large into smaller and
more specific ones so that clients will only have to know
about the methods that are of interest to them.
Such shrunken interfaces are also called role interfaces.
ISP is intended to keep a system decoupled and thus
easier to refactor, change, and redeploy.
ISP Example
UI Designs1. What is UI?2. UI Design Models3. Design Principles 4. Golden Rule5. Visual Designs
User friendly for anticipated users.
System users often judge a system by its interface rather than its functionality.
A poorly designed interface can cause a user to make catastrophic errors.
Poor user interface design is the reason why so many software systems are never used
Some Facts for UI ……
To suggest some general design principles for user interface design
To explain different interaction styles and their use
To explain when to use graphical and textual information presentation
To explain the principal activities in the user interface designprocess
To introduce usability attributes and approaches to system evaluation
Objectives
User familiarityThe interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system
ConsistencyThe system should display an appropriate level of consistency. Commands and menus should have the same format, command punctuation should be similar, etc.
Minimal surpriseIf a command operates in a known way, the user should be able to predict the operation of comparable commands
Design principles of user interface
RecoverabilityThe interface should include mechanisms to allow users to recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc.
User guidanceThe interface should provide meaningful feedback when errors occur and provide context‐sensitive user help facilities
User diversityInteraction facilities for different types of user should be supported. For example, some users have seeing difficulties and so larger text should be available
Web 2.0Facilitate participatory information sharing, interoperability, user‐centered design and collaboration on the world wide web.User can provide the data that is on a web 2.0 and exercise some control over that data.e.g.: social networking sites, video sharing sites, Wikis, (micro‐)blogs, etc.
Web 3.0
130
TEXTsMost of the information are conveyed through texts, especially websites.
Careful layout and creational designs can make the website stand out from the peers
Combine texts with FLASH, to embed the texts in the small videos can help a lot.
Besides main texts, website navigator, headings etc. are all composed of texts
132
http://jonesingfor.com/#/HOME/
133
Font design for businesses is very challenging, that eventually serve as part of the overall business.
In UI design, there is no need \to have the designer be professional in font design, but he/she needs to know how to use them.
134
Logo and Slogans http://www.androians.com/vegas/
136
Besides, we can use Color contrast, size contrast, and density contrastto increase the beauty of the layout
On the same page, texts need to be consistent
137
138
139
Image is more intuitive than the texts, also the core elements of UI design, the majority of visual works mostly have excellent graphic design and images
IMAGEs
Through the use of good graphics or pictures, closely seize the viewer's eye.
A good image is worth a thousand words!
140http://www.8yu.com/
141http://www.8yu.com/
142http://www.8yu.com/
143http://www.8yu.com/
144http://www.8yu.com/
145http://www.8yu.com/
146http://www.8yu.com/
147http://www.8yu.com/
148http://www.8yu.com/
149
However, we cannot only emphasize the importance of visual aesthetics, and only beautiful graphics or pictures, but ignoring the core objectives of a website
‐ efficient and accurate information delivery
the customer will not be satified.
150
DRAFT
151
FINAL
To design the website, we must be very clear WHY:
who are the target users? What can they get from the website?What do we have as a return from the website, or biz model?
Even with similar objectives, the specific design will also be based on the customer's different requirements
product sales or business services?
Design Goal and Strategy
To make sure what is the goal of the design, is primarily to find the clients’ advantages, features, and business models.
Sometimes, clients are not sure about what materials to provide, in this case designers can ask the following questions.
Question 1: what is your goal to build the website?
Possible answers:
Advertisement for our provided servicesE‐commerce, sales
For cultures and ideasTo establish a platform for suppliers and customersTo provide public services
*multiple choices* are possible
LENOVO’s website is to primarily describe the products, but also support e‐commerce, and to promote its brand
blood
Question 2: what is the scale of your website?
Possible answers:
very small, to just place the materials we have now, unlikely to add new stuff futureStart from small, then may grow bigger, and finally has very rich contents
Very complicates, many columns
Rich resources, rapid updates and grow
Not quite sure at this point, will see
The size of the website will determine the design structure
If the website will experience rapid updates and grow, design has to reserve space for the future and with flexible structures
For example, vertical columns may help if many contents
An example from LENOVO: vertical columns for its rich products
http://www.ray-ban.com/China/
A glass brand: RAY‐BAN (easy to add new products)
http://www.ray-ban.com/China/
Question 3: what are the common features of the users?
Possible answers:
Distributors and end‐users。
Youth from 15‐30
Monthly income higher than 5000 RMB or white collarsArt students or fans
Male or female?
Foreigners only
Question 4: what is the business model?
Possible answers:
website itself will not make money, if clients are interested, they will order in another channel
advertisement and online gaming
users can pay directly online
we sell “information”, e.g., VIP members can have more information than normal usersno income, just for fun
This question is to help designers to understand the expectationof the clients on this website, and in turn to change the design for this purpose
Question 5: How about the used technologies?
Possible answers:
full FLASH, fancy
full HTML will be sufficient
welcome page in FLASH, then static inside or some small flash
3D 360 degrees, product show, FLASH for product descriptionspartly in PHP/ASP
Toyota AYGOD with 360 degrees show
http://www.toyota-europe.com/cars/new_cars/aygo/index.aspx
Question 6: what about design style?
Possible answers:
modern
professional, rich content, not that fancy
Lively, bright colors, like fruit sugar ...
I don’t like blue, just NO blue pls
shining, I want it to be out of ppl’s imagination!
http://www.tsred.com/
Target Users
