自用分享，Markdown 格式，可直接复制到支持 Markdown 的编辑器里，比如 Obsidian：
# Practical UI (2nd Edition) Reading & To-Learn List
## 📌 Introduction (P. 9)
- [ ] Hi, I'm Adham (P. 10)
- [ ] UI design doesn't have to be so hard (P. 11)
- [ ] A tutorial to apply what you've learned (P. 14)
## 📘 1. Fundamentals (P. 16)
- [ ] Minimise usability risks (P. 17)
- [ ] Have a logical reason for every design detail (P. 19)
- [ ] Minimise interaction cost (P. 21)
- [ ] Minimise cognitive load (P. 24)
- [ ] Create a design system (P. 26)
- [ ] Ensure an interface is accessible (P. 35)
- [ ] Use common design patterns (P. 40)
- [ ] Use the 80/20 Rule to prioritise (P. 42)
- [ ] Keep costs in mind (P. 43)
- [ ] Be consistent (P. 44)
- [ ] Clearly indicate interaction states (P. 47)
- [ ] Tutorial - Fundamentals (P. 48)
- [ ] Chapter summary (P. 53)
## 📘 2. Less is more (P. 55)
- [ ] Remove unnecessary information (P. 56)
- [ ] Remove unnecessary styles (P. 57)
- [ ] Not all links need to be underlined (P. 59)
- [ ] Use progressive disclosure (P. 61)
- [ ] Don't confuse minimalism with simplicity (P. 63)
- [ ] Make sure important content is visible (P. 65)
- [ ] Design for the smallest screen first (P. 66)
- [ ] Reduce choice to speed up decision making (P. 67)
- [ ] Tutorial Less is more (P. 72)
- [ ] Chapter summary (P. 76)
## 📘 3. Colour (P. 78)
- [ ] Ensure sufficient contrast (P. 79)
- [ ] Don't rely on colour alone to convey meaning (P. 85)
- [ ] Use system colours to indicate status (P. 87)
- [ ] Use colour to define a clear visual hierarchy (P. 89)
- [ ] Use black and white for a timeless aesthetic (P. 91)
- [ ] Add a tinge of colour to black and white (P. 93)
- [ ] Use 1 brand colour (P. 94)
- [ ] Apply the brand colour to interactive elements (P. 96)
- [ ] Create a colour palette with rules that govern its usage (P. 103)
- [ ] Use the HSB colour system (P. 105)
- [ ] 5 colour variations is often all you need (P. 106)
- [ ] Create a dark colour palette (P. 116)
- [ ] Add depth using colour and shadows (P. 120)
- [ ] Consider using transparent colours (P. 124)
- [ ] Create a transparent colour palette (P. 129)
- [ ] Use transparent layers for interaction states (P. 142)
- [ ] Name colours to keep them organised (P. 146)
- [ ] Adjust photo colour temperature to match the colour palette (P. 152)
- [ ] Tutorial Colour (P. 154)
- [ ] Chapter summary (P. 161)
## 📘 4. Layout and spacing (P. 163)
- [ ] Group related elements (P. 164)
- [ ] Create a clear visual hierarchy (P. 179)
- [ ] Test visual hierarchy using The Squint Test (P. 187)
- [ ] Use depth to create visual hierarchy (P. 188)
- [ ] Understand the box model (P. 189)
- [ ] Design @1x using points (P. 191)
- [ ] Create a set of predefined spacing options (P. 192)
- [ ] Space elements based on how closely related they are (P. 194)
- [ ] Be generous with white space (P. 201)
- [ ] Align the main layout to a 12 column grid (P. 203)
- [ ] Align text to improve readability (P. 207)
- [ ] Try to avoid using multiple alignments (P. 210)
- [ ] Keep related actions close (P. 213)
- [ ] Ensure your interface is unbreakable (P. 216)
- [ ] Use the Rule of Thirds for photos (P. 217)
- [ ] Tutorial - Layout and spacing (P. 219)
- [ ] Chapter summary (P. 227)
## 📘 5. Typography (P. 229)
- [ ] Use a single sans serif typeface (P. 230)
- [ ] Evoke emotion using a second typeface for headings (P. 237)
- [ ] Use regular and bold font weights only (P. 239)
- [ ] Use a type scale to set font sizes (P. 241)
- [ ] Make long body text bigger (P. 244)
- [ ] Use at least 1.5 line height for long body text (P. 245)
- [ ] Decrease line height as font size increases (P. 247)
- [ ] Ensure ideal line length (P. 248)
- [ ] Left align text (P. 251)
- [ ] Decrease letter spacing for large text (P. 253)
- [ ] Ensure text on photos is legible (P. 254)
- [ ] Avoid light grey and pure black text (P. 257)
- [ ] Tutorial Typography (P. 258)
- [ ] Chapter summary (P. 264)
## 📘 6. Copywriting (P. 266)
- [ ] Be concise (P. 267)
- [ ] Use sentence case (P. 269)
- [ ] Use plain and simple language (P. 270)
- [ ] Front-load text (P. 271)
- [ ] Use the inverted pyramid (P. 272)
- [ ] Limit the use of abbreviations and acronyms (P. 274)
- [ ] Limit the use of UPPERCASE (P. 275)
- [ ] Break up content using descriptive headings and bullets (P. 276)
- [ ] Avoid using "my" on form labels (P. 278)
- [ ] Use vocabulary consistently (P. 279)
- [ ] Use numerals for numbers (P. 281)
- [ ] Avoid full stops if possible (P. 283)
- [ ] Ensure text length is similar across similar interface elements (P. 284)
- [ ] Ensure text links describe their destination (P. 285)
- [ ] Write clear error messages (P. 287)
- [ ] Tutorial - Copywriting (P. 288)
- [ ] Chapter summary (P. 293)
## 📘 7. Buttons (P. 295)
- [ ] Define 3 buttons weights (P. 296)
- [ ] Use a single primary button for the most important action (P. 303)
- [ ] Use secondary buttons for less important actions (P. 305)
- [ ] Use tertiary buttons for the least important actions (P. 306)
- [ ] Try to avoid disabled buttons (P. 307)
- [ ] Left align buttons (P. 312)
- [ ] Ensure button text describes the action (P. 317)
- [ ] Ensure buttons have a sufficient target size (P. 318)
- [ ] Balance icon and text pairs (P. 320)
- [ ] Add friction to destructive actions (P. 322)
- [ ] Tutorial - Buttons (P. 325)
- [ ] Chapter summary (P. 328)
## 📘 8. Forms (P. 330)
- [ ] Stack forms in a single column layout (P. 331)
- [ ] Minimise the number of form fields (P. 336)
- [ ] Mark optional fields (P. 337)
- [ ] Try to avoid optional fields by using opt-ins (P. 338)
- [ ] Mark both required and optional fields (P. 339)
- [ ] Match field width to the intended input (P. 344)
- [ ] Stick with conventional form field styles (P. 346)
- [ ] Display hints above form fields (P. 348)
- [ ] Don't use placeholder text instead of a label (P. 350)
- [ ] Ensure form field labels are close to their fields (P. 352)
- [ ] Try to use radio buttons instead of dropdowns (P. 353)
- [ ] Use an autocomplete instead of a long dropdown (P. 354)
- [ ] Use steppers for numeric fields instead of dropdowns (P. 356)
- [ ] Use a checkbox or toggle switch for 2 options (P. 358)
- [ ] Use positive phrasing for checkboxes (P. 360)
- [ ] Break up long forms into multiple steps (P. 361)
- [ ] Group related fields under headings (P. 362)
- [ ] Ensure form field borders are high contrast (P. 363)
- [ ] Choose your form validation approach (P. 364)
- [ ] Chapter summary (P. 369)
## 🏁 Conclusion (P. 371)
- [ ] Closing thoughts (P. 372)