有呀,有呀,設計!有呀,有呀,組件!

有呀,有呀,設計!

最近看了一本關於設計的書《有呀,有呀,設計!》,受到了啓發,想做一個類似於有呀,有呀,設計有呀,有呀,組件,旨在提供給前後端開發人員開箱即用的組件,尤其是UI組件,與樣式有關的組件,更多的是爲後端人員考慮,減輕後端開發研究組件樣式的苦惱。

如果沒有UI設計提供的設計圖,那麼前後端在開發時就會陷入困境,邏輯我會寫啊,功能能實現啊,但是頁面展示的好醜哦,怎麼都看得不順眼,怎麼調樣式才能好看呢,反覆地調樣式最終也不滿意,於是我花了很多的時間,看了很多設計類相關的書籍,正在嘗試開發一個網站,對於沒有設計圖的前後端來說,頁面該怎樣配色,怎樣佈局,怎樣搭配才能賞心悅目,令人心情愉悅,我覺得這件事情很有意義,就嘗試去做了,目前項目在github上開源,地址是color-library,還在開發中,有興趣的小夥伴可以關注一下,順手點個star也不是不可以~

下面摘錄一下《有呀,有呀,設計!》這本書裏的精華吧,對於苦惱於設計的我來說,真的幫助很大,也學到了很多。

有一些能使版式設計更好的方法,至今還沒有專屬用語。
於是,我們把這些方法統一叫作“有呀,有呀,設計!”。
啊,有呀有呀,我確實看到過這個設計!
爲了讓大家在感嘆“有呀有呀”的同時,記住對應的設計用語,
我們決定立馬製作這樣一本書。這麼一來,就會出現下面的情景:
對啦,這裏就用“圓形效果”吧。
這裏的話,“一般用雙色調搞定”。
啊,也許可以“兩張照片並排”。
就像上面這樣,通過把設計用語說出口來回想,
大家便可以簡單快速地做設計。
而且,技能“存貨”也會越來越多!
基於這一出發點,我們想出了“有呀有呀用語”。

本書將那些會讓你不假思索地感嘆“有呀,有呀,我以前確實見過!”的版式特徵,整理總結成45個設計用語,每個設計用語設置4頁篇幅和6個範例搭配相應解說來介紹。

  1. 一般用雙色調搞定
  2. 圓形效果
  3. 整體圍粗框
  4. 左起四分之一法則
  5. 散放三角形
  6. 畫線分段
  7. 半透明背景
  8. 傾斜效果
  9. 小字裝飾
  10. 活用插畫
  11. 漂亮的拱形
  12. 四周留白最棒了
  13. 字間留空排列
  14. 加一根極粗線條
  15. 文字添框線
  16. 帶狀底紋生韻律
  17. 對話框打造親近感
  18. 溢出效果
  19. 鋪上條帶即可
  20. 自然地鏤空文字
  21. 斜線切分
  22. 聰明的網格設計
  23. 不知如何設計?使用條紋
  24. 只要有單色照片就行
  25. 可愛手繪文字
  26. 形似標誌設計
  27. 各式框架
  28. 凝練的漸變
  29. 手寫字體增添魅力
  30. 居中擺放正方形
  31. 軟乎乎的挖版效果
  32. 白色背景上放切好的圖片
  33. 文字點綴
  34. 照片大塊留白
  35. 水珠花紋點綴
  36. 重複重複再重複
  37. 使文字靈動起來
  38. 文字貼近版面邊緣
  39. 添置多幅照片
  40. 不顯全貌,若隱若現
  41. 錯開框架
  42. 用文字作框架
  43. 用裝飾性線條,營造氣氛
  44. 文字跨越排列
  45. 兩張照片並排
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章