說明：從本週開始，個人日誌裏邊就不再涉及團隊工作和項目的整週進度了，因爲團隊日誌裏邊已經有了很好地說明。
鏈接在這裏https://blog.csdn.net/Seb_Veeeettle/article/details/105749143
個人工作
- 登錄界面的改善
- 項目網站首頁的設計
- 大量JavaScript技巧的初步嘗試
心得體會
前端的設計的確是需要一些美學概念的，之前一直都是一些局部東西的前端頁面設計，局部功能的確沒有考慮到整體，當然實現的邏輯也有些問題，這裏先不討論，因爲最初框架的界面不是自己做的。當做整個主頁的設計的時候，佈局、色彩、字體、細節上的凸顯都是需要邏輯的，不說多麼美，至少是合理的和賞心悅目的，同時也需要和功能特點進行契合。後邊的開發過程中也需要對這些進行提前的考慮，下邊是一些具體總結。
重要規範
一致性 Consistency
與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。
反饋 Feedback
控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；
頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。
效率 Efficiency
簡化流程：設計簡潔直觀的操作流程；
清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；
幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
可控 Controllability
用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；
結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。
設計原則
以下是對基本設計原則的概述，每一個優秀的設計中都應用了這些設計原則，它們相互關聯，只應用某一個原則的情況很少。（出自《寫給大家看的設計書》）
對比（Contrast）
對比的基本思想是，要避免頁面上的元素太過相似。如果元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就乾脆讓它們截然不同。要讓頁面引人注意，對比通常是最重要的一個因素，正是它能使讀者首先看這個頁面。
重複（Repetition）
讓設計中的視覺要素在整個作品中重複出現。可以重複顏色、形狀、材質、空間關係、線寬、字體、大小和圖片，等等。這樣一來，既能增加條理性，還可以加強統一性。
對齊（Alignment）
任何東西都不能在頁面上隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯繫。這樣能建立一種清晰、精巧而且清爽的外觀。
親密性（Proximity）
彼此相關的項應當靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成爲一個視覺單元，而不是多個孤立的元素。這有助於組織信息，減少混亂，爲讀者提供清晰的結構。
導航設計原則
航可以解決用戶在訪問頁面時：在哪裏，去哪裏，怎樣去的問題。一般導航會有「側欄導航」和「頂部導航」2 種類型。
選擇合適的導航
選擇合適的導航可以讓用戶在產品的使用過程中非常流暢，相反若是不合適就會引起用戶操作不適（方向不明確），以下是「側欄導航」和 「頂部導航」的區別。
側欄導航
可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用於中後臺的管理型、工具型網站。
一級類目
一級類目
適用於結構簡單的網站：只有一級頁面時，不需要使用麪包屑。
二級類目
二級類目
側欄中最多可顯示兩級導航；當使用二級導航時，我們建議搭配使用麪包屑，方便用戶定位自己的位置和快速返回。
三級類目
三級類目
適用於較複雜的工具型後臺，左側欄爲一級導航，中間欄可顯示其對應的二級導航，也可放置其他的工具型選項。
頂部導航
順應了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度。
適用於導航較少，頁面篇幅較長的網站。
Container 佈局容器
用於佈局的容器組件，方便快速搭建頁面的基本結構：
外層容器
- 頂欄容器
- 側邊欄容器
- 主要區域容器
- 底欄容器
佈局和導航是產品的骨架，是頁面的重要構成模式之一，是作爲後續展開頁面設計的基礎，可以爲產品奠定交互和視覺風格。
幾種佈局的概念
1、靜態佈局（Static Layout）
即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫代碼的佈局來佈置；
2、彈性佈局
彈性佈局是CSS3引入的強大的佈局方式，用來替代以前Web開發人員使用的一些複雜而易錯hacks方法（如使用float進行類似流式佈局）。
其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：
flex-flow: ||
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-direction定義了彈性項目在彈性容器中的放置方向，默認是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
flex-wrap定義是否需要拆行以使得彈性項目能被容器包含。*-reverse代表相反的方向。
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式，下面的例子很直觀的說明了各個屬性值的區別：
3、自適應佈局（Adaptive Layout）
自適應佈局（Adaptive）的特點是分別爲不同的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨窗口大小的調整發生變化。
你可以把自適應佈局看作是靜態佈局的一個系列。
就是說你看到的頁面，裏面元素的位置會變化而大小不會變化；
4、流式佈局（Liquid Layout）
流式佈局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
5、響應式佈局（Responsive Layout）
參考柵格系統
分別爲不同的屏幕分辨率定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。
可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。
每個屏幕分辨率下面會有一個佈局樣式，同時位置會變而且大小也會變。