<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          終極指南!超全面的UI動效基本規則總結

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          動畫效果如今已經深入到 UI界面的每個角落。屏與屏之間的切換因為動效而顯得更加連貫,交互的上下文邏輯也因為動效的加持而更加清晰。動效對于產品和用戶而言,都是一個不可多得的重要組成部分。但是當我瀏覽相關的文章的時候,發現絕大多數的動效有關的文章,都僅僅只是針對特定的動效設計案例來進行分析和描述,少有文章真正系統地闡述動效應該遵循怎樣的規則,符合什么樣的特征。這篇文章當中,我不會講述什么新穎的技巧或者前沿的趨勢,但是我會將動效設計的主要原則和標準都匯集到一起,總結出來。

          有了這篇文章,你就不用在其他地方學習基本的動效設計規則了。

          動效的持續時長和速度

          當元素的位置和狀態發生改變的時候,動效的速度應該足夠慢,維持足夠長的時間,讓用戶能夠注意到變化,但是同時,又不能慢到需要用戶去等待。

          大量的研究表明,動效的最佳持續時長是200毫秒到500毫秒之間。這個研究數字是基于人腦的認知方式和信息消化速度得出來的。任何低于100毫秒的動效對于人的眼睛而言,幾乎都是瞬間,很難被識別出來。而超過1秒的動效會讓人有遲滯感。

          △ 界面中動效持續時長

          在手機這樣的移動端設備上,按照 Material Design 的建議,動效時長應該控制在200~300毫秒之間,在平板電腦上,這個時長應該延長大概30%,也就是說,時長應該在400~450毫秒之間。原因很簡單,屏幕尺寸越大,元素在發生位移的時候,跨越的距離越長,速度一定的情況下,時長自然越長。相應的,在可穿戴設備的小屏幕上,這個時長應該縮短30%,在150~200毫秒之間。

          △ 移動端設備的屏幕尺寸影響動畫的持續時長

          網頁動效的處理方式也不一樣。由于我們習慣在瀏覽器中直接打開網頁,考慮到瀏覽器性能和大家的使用習慣,用戶對于瀏覽器中動效變化速率的預期還是比較快的。相比于移動端中的動效速度,網頁中的速度會快上一倍,換句話說,就是動效的持續時長應該在150~200毫秒之間。如果持續時間太長,用戶會忍不住覺得網頁卡住了。

          不過,如果你的網頁中所用的動效并非功能性的,而是裝飾用的,或者用來吸引用戶的注意力,那么請忘記這個規則,在這種情況下,動效可以更長。

          更大的屏幕=更慢的動效?絕不是如此!

          請務必記住,無論是在什么平臺上,動效的持續時長絕不是單純取決于屏幕尺寸和運動距離,還取決于平臺特征、元素大小、功能設定等等。較小的元素或者較小的變化,相應的動效應該更快一點。因此,大而復雜的元素動效持續時間更長,看起來也更舒服一點。

          大小相同的元素,在移動的時候,移動距離最短的元素,是停止下來的。

          與較大的元素相比,較小的元素運動速度應該更慢,因為相同的移動距離,對于小元素而言,位移距離和自身大小比例倍數更大,相對偏移更遠。

          △ 動效的持續時長還和元素大小、運動距離有關

          動效的運動規律要符合物理規律,當元素運動到邊界,發生碰撞的時候,碰撞的「能量」最終是要均勻分攤下來的,而彈跳的在多數情況下是不適合的,僅在特殊情況下適合使用。

          △ 避免使用彈跳,它會分散用戶的注意力

          元素的運動過程應該是清晰的,盡量不要在運動中使用模糊的效果(是的,說的就是 AE 的模糊動效愛好者們),模糊的動效不適合在 UI界面中使用。

          △ 不要在動效中使用模糊效果

          列表項(新聞列表、郵件列表等)所使用的動效,在實際運動的過程中,項和項之間應該有輕微的延遲,元素之間的延遲應該控制在20~25毫秒之間,如果持續時間再長,可能會給人一種遲滯的觀感。

          △ 列表項之間的延遲應該在20~25毫秒

          緩動

          緩動指的是物體在物理規則下,漸進加速或減速的現象。在動效中加入緩動的效果能夠讓運動顯得更加自然,這是運動的基本原則之一。對于緩動,迪士尼的兩位關鍵性的動畫大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過非常詳盡的描述。

          為了不讓動效看起來機械或者人工痕跡太明顯,元素的運動應該有漸進加速和漸進減速的特征,就像物理世界當中其他的物體這樣。

          勻速直線運動

          不受任何物理力量的影響,勻速直線運動看起來是非常不自然的,尤其是對于人眼而言。

          所有用來設計動畫的應用都會使用坐標軸和曲線來闡述動效的運動特征,我將嘗試闡述它們的含義,以及如何使用。坐標軸的 X軸是實現,而 Y軸則表示的唯一,換句話來說,如同我們在初中物理中所學到的,坐標軸上的線條描述的是速度和加速度的特征。下面所示的直線,表示速度是均勻的,也就是勻速直線運動,物體在相同時間內運動的距離是不變的。

          △ 勻速直線運動的座標圖

          均勻的變化通常只會用在色彩的改變或者透明的改變上,一般來說,我們也可以讓背景元素均勻運動,而前景元素保持不變,來呈現它的狀態,就像上圖一樣。

          緩動加速曲線

          通過曲線我們可以看到,物體開始時候的初速度比較低,運動緩慢,隨后速度逐漸增加,這意味著物體在加速運動。

          △ 加速曲線

          當物體加速飛出屏幕的時候,可以使用這種加速曲線,比如界面中被用戶使用滑動手勢甩出去的卡片。但是請記住,只有當運動對象需要完全離開界面的時候才會這么使用,如果它還需要再回來的話,則不行。

          △ 以加速運動將卡片扔出屏幕

          動畫曲線有助于正確傳達訊息,甚至表達情緒和感覺。在下面的案例當中,我們可以看每個元素的運動位移是完全一樣的,所消耗的總時長也是一樣的,但是運動的速率變化是不同的,這一點也體現在曲線上,所表現出來的情緒也不同。當然,通過調整曲線,你能夠讓物體的運動軌跡盡可能接近現實世界。

          緩動減速曲線

          當元素從屏幕外運動到屏幕內的時候,動效應該遵循這類曲線的運動特征。從全速進入屏幕開始,速度降低,直到完全停止。

          △ 減速曲線

          減速曲線可以適用于多種不同的 UI控件和元素,包括從屏幕外進入屏幕內的的卡片、條目等。

          △ 減速曲線案例

          緩動標準曲線

          在這種曲線之下,物體從靜止開始加速,到達速度最高點之后開始減速直到靜止。這種類型的元素在 UI界面中最為常見,每當你不知道要在動效中使用哪種運動方式的時候,可以試試標準曲線。

          △ 標準曲線

          根據 Material Design 的規范,最好使用不那么對稱的增速和減速的過程,讓動效看起來更加真實。同時大家會更加在意運動的結果,曲線的末端,也就是運動結束的過程最好進行適當的強調,換句話說就是減速過程持續的時長最好超過開始加速的時長,用戶將會更加清楚地觀察到運動的最終結果,從而更好地明白運動的終止狀態。

          △ 對稱和非對稱運動的差異

          當元素從屏幕的一個位置移動到另外一個位置的時候,最好使用這種標準的緩動曲線,這個過程中,盡量不要讓動畫效果引人注意,不要使用戲劇化的效果。

          △ 卡片元素從屏幕上運動的時候,不對稱的緩動曲線

          當元素從屏幕上消失的時候,采用了相同的不對稱緩動曲線,用戶同樣可以通過滑動回到之前的位置。這個環節使用了抽屜式導航控件。

          △ 抽屜式導航隨著緩動曲線從屏幕上隱藏

          從這些案例當中,可以看出許多動效的初學者對于運動規則的了解還不足。比如下面的這個動效,元素隨著減速曲線出現,然后使用標準緩動曲線消失。根據 Material Design 的標準,新出現的元素持續的時間應該更長,因為需要吸引更多的注意力。

          △ 導航菜單的出現和消失

          貝賽爾曲線函數 cubic-bezier()是用來描述曲線的,它的名字前面之所以帶有 Cubic 是因為每個貝賽爾曲線的描述都是基于四個不同的參數來確定的。曲線的起點(0,0)和終點(1,1)在坐標軸上的位置是已經事先確定的。

          為了簡化你對于貝賽爾曲線的理解,我們推薦兩個網站,分別是 easings.net 和 cubic-bezier.com ,前者包含了最常見的曲線的列表,你可以將他們復制到你的原型工具中,第二個網站為你提供了不同曲線的參數,你可以直接在其中查看各種對象的移動方式。

          △ 不同類型的 cubic-bezier()的曲線和參數

          界面動效的編排

          就像芭蕾舞的舞蹈編排一樣,動畫效果也是需要編排的,它的主要目的是讓元素從一個狀態切換到下一個狀態,自然過渡,讓用戶的注意力自然地被引導過去。

          編排有兩種不同的方式,一種是均等交互,另一種是從屬交互。

          均等交互

          均等交互意味著所有的元素和對象都遵循一個特定的編排的規則。

          在這個實例當中,所有的卡片都遵循著一個方向來引導用戶的注意力,自上到下地次第加載。相反,沒有按照這樣清晰的規則來加載,用戶的注意力會被分散,元素的外觀排布也會顯得比較糟糕。

          △ 用戶的注意力應該沿著一個流向來引導

          至于表格式的布局,它相對就復雜一點。在這里,用戶的視線流向應該是清晰的對角線方向,因此,逐個區塊次第出現是一個糟糕的設計。這樣的逐個顯示,一方面耗時太長,另一方面會讓用戶覺得元素的加載方式是鋸齒狀的,這種方式并不合理。

          △ 沿著對角線加載

          從屬交互

          從屬交互指的是使用一個中心對象作為主體,來吸引用戶的注意力,而其他的元素從屬于它來逐步呈現。這樣的動畫設計能夠創造更強的秩序感,讓主要的內容更容易引起用戶的注意。

          在其他的設計當中,用戶很難搞清楚哪個才是主要的,因為注意力被分散了。因此,如果要設置多個動畫元素,應該定義清楚誰為主,誰是中心,并且盡量按照從屬關系來次第呈現不同的子元素。

          如果只有一個中心對象,那么其他的對象的運動方式都要受它制約,否則用戶分不清楚主次。

          根據 Material Design 的規定,當元素不成比例地變幻尺寸的時候,它應該沿著弧線運動,而不是直線運動,這樣有助于讓它看起來更加自然。所謂「不成比例」地變化指的是元素的長和寬的變化并不是按照相同比例來縮放或者變化的,換句話來說,變化的速度也不一樣。(比如,方形變成矩形)

          △ 不成比例地改變對象外觀的時候,運動軌跡應該是弧線的

          相反,如果元素是按照比例改變大小的時候,應該沿著直線移動,這樣不僅操作更加方便,而且更符合均勻變化的特征??匆幌抡鎸嵉陌咐銜l現直線的運動軌跡會更加合理。

          △ 成比例變化大小的時候,應該沿著直線運動

          當元素不成比例放大的時候,運動軌跡是弧線,而這種弧線運動軌跡有兩種不同的呈現一種,一種軌跡是初始方向為垂直方向而運動結束時瞬間運動方向是水平的(Horizontal out),另外一種初始方向是水平方向而運動結束時瞬間運動方向是垂直的(Vertical out)。

          那么怎么選取這個方向呢?很簡單,元素運動曲線的方向,應該是要向界面的主要運動方向的主軸靠攏重合。舉個例子,在下面的動效當中,整個界面的滾動方向是上下滾動,主軸是縱向的,因此,當卡片點擊之后被展開的時候,會先向右水平移動,并最終以垂直運動結束,運動的最終方向,切線是垂直的,也就和垂直方向的主軸重合了。

          △ 元素按照弧線展開的時候,最終方向應該和主軸重合

          如果幾個不同的元素的運動軌跡相交,那么他們不能彼此穿越。如果每個元素都必須通過某個交點,抵達另外一個位置,那么應該次第減速,依次通過這個點,給彼此留出足夠的空間。另外一種選擇,是元素不相交,而是像實體一樣在靠近的時候,彼此推開。為什么?因為我們通常假定界面中所有的元素都位于同一個平面當中。

          在運動過程中,元素不應彼此穿越,而應該互相留出空間。

          但是這一點也不是一成不變的。在比較擁擠的界面當中,某個元素可以「越過」其他的元素,它同樣沒有穿過其他的元素消失,而是單純的移動。這一點從某種意義上也是延續自我們日常的物理規律,只不過我們會默認界面中的元素在這個情況下擁有了高度這樣的屬性。

          △ 元素可以越過其他的元素運動

          結語

          我們總結了這么多動效運動的規則和原則,從某種意義上還是延續自我們對于物理世界的認知,摩擦力和加速度在虛擬界面中以另外的方式續存著。模仿現實世界的界面讓我們對于界面的秩序有更清晰的認知,允許我們更輕松的了解和訪問界面的內容。

          如果動效按照正確的方式來設計,它應該是不顯著,且不會分散用戶注意力的。如果不是這樣,那么你需要讓動效更微妙一點,實在不行甚至需要將它移除。動效不應該成為影響用戶操控界面的障礙,或者轉移注意力的存在。

          當然,即使是遵循這么多規律,動效的設計依然是一門藝術,而非單純的科學,多做測試多摸索總是有必要的。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

          10分鐘教你如何選擇篩選組件

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          生活需要篩選,App頁面也一樣。本文通過案例分析,從篩選組件的樣式、使用場景等方面來解析篩選組件在手機端場景的設計。


          篩選組件概述

          篩選組件的作用是幫助人們在面對大量信息時,通過更的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及Tab欄,本文暫不分析。


          組件包括篩選按鈕與篩選器,篩選器包含類別及各類別下的篩選項。使用頻次高低、篩選條件的數量都是決定篩選組件樣式的因素。



          01


          位于 Tab 欄的篩選組件


          組件樣式

          篩選按鈕位置:一般位于Tab欄最右側視覺薄弱區域。


          篩選器形式:點擊按鈕,篩選器以抽屜形式從Tab欄底部向下展開篩選條件,或以浮層形式從屏幕最右側向左滑出篩選條件。


          樣式分析

          當界面使用Tab欄時,已為內容做了第一層篩選,多數情況下已滿足用戶對內容的篩選需求。


          當篩選類別較多且復雜時,就需要在Tab欄增加篩選組件來提供更詳細的篩選能力。而這里的篩選組件較于Tab欄其他條件優先級較低,屏幕右側為視覺薄弱區域,這也解釋了為什么大多數Tab欄的篩選組件都位于最右側。



          案例一

          Image title

          案例來源于美團App


          此頁是對美食品類的選擇,這里的篩選組件在Tab中是最常見的樣式。對于用戶而言,選擇商家店鋪優先考慮地域、美食類別、價格及綜合評價,而用餐人數與餐廳服務等只是輔助選擇條件。


          篩選器使用了抽屜形式,如要選擇此樣式,建議在篩選條件不多且不超過一屏的場景使用。



          案例二

          Image title

          案例來源于淘寶App


          當用戶從首頁全局搜索后,出現此頁。篩選按鈕位于二級Tab欄。點擊篩選按鈕后,由于篩選條件較多,很難一頁展示完,用戶往往需要上下滑動屏幕查看全部,因此使用右側浮層展開的形式較適合。



          案例三

          Image title

          案例來源于嗶哩嗶哩App


          全局搜索后,Tab欄默認展開綜合tab內容,用戶對排序、時長、分區的篩選需求較高,因此直接把篩選類別放在了二級Tab欄,相比通過點擊篩選按鈕再展開類別的交互方式更簡單直白。


          點擊篩選類別后,篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少(不超過4項),篩選項數量不多的場景。



          02


          底部按鈕型篩選組件


          組件樣式

          篩選按鈕位置:以按鈕或浮層形式固定在界面底部,便于用戶操作。


          篩選器形式:點擊按鈕,篩選器以抽屜形式從按鈕底部向上展開篩選條件,或以界面浮層形式從底部向上展開篩選條件。


          樣式分析

          使用底部篩選按鈕的界面,內容區類別相對單一,通過篩選組件就能滿足篩選需求,并對篩選的需求較大。而底部按鈕作為常見的按鈕形式,用戶點擊更方便,因此承載篩選組件較合適。


          若使用此樣式,點擊篩選按鈕后,篩選器的出現優先考慮從底部向上出現的抽屜式浮層。



          案例一

          Image title

          案例來源于旅游類App Expedia


          輸入旅游目的地后進入此列表頁,用戶目的性明確,就是要查看結果。底部的篩選按鈕是為了幫助用戶更快的篩選結果,方便用戶觸達。并且篩選條件較多,無法一頁展示完,使用了界面浮層的形式。


          這里還有2個細節:


          1、由于篩選類別較多,手動清除單個篩選條件太過繁瑣,于是篩選器底部增加了清除按鈕,操作更簡便。但底部按鈕一般為“確定”操作,“清除”放在底部樣式上沒有做誤操作提示,可能會增加誤操作機率。


          2、篩選后,篩選按鈕處會顯示已選擇的篩選類別數量,給用戶帶來良好的使用反饋。



          案例二

          Image title

          案例來源于dribbble


          當前頁為地點搜索。需要先進行篩選操作,內容區再出現結果。篩選按鈕位于底部浮層,篩選類別代替篩選按鈕平鋪展現,篩選器使用抽屜式從浮層底部向上展開。


          此樣式一般適合篩選類別較少,并且每個類別的篩選項不多的場景。優點是減少操作步驟,提高用戶操作效率。并且可以學習一些體驗細節:在篩選器中選擇一個選項后,在其篩選類別處同步修改為該選項;篩選項與篩選類別選中狀態一致,增加關聯度。



          03


          浮層按鈕型篩選組件


          組件樣式

          篩選按鈕位置:以浮層按鈕的形式位于界面右下方,占用空間較少。

          篩選器形式:點擊按鈕,篩選器以浮層形式為主,或在篩選按鈕下方展開篩選條件。


          樣式分析

          浮層型篩選按鈕的優點是增大內容區的縱向空間,比底部按鈕型篩選組件的層級要弱一些。但當用戶需要操作時,它的位置也便于用戶點擊。

          設計時按鈕用色需要區別于內容區,內容形式盡量精簡直觀。若使用案例3中的扇形篩選器,則要求篩選類別為1-2類,篩選項數量少切文案精簡。



          案例一

          Image title

          案例來源于dribbble


          篩選按鈕位于界面右下方緊貼于右側屏邊,浮于被篩選內容上層,滑動屏幕時消失。點擊篩選按鈕后,從屏幕右側展開篩選浮層,原篩選按鈕變為確認按鈕。


          此按鈕形式最大限度的讓出空間留給內容區,且右下角為用戶關注薄弱區,這樣的位置關系可讓用戶按需操作。關于篩選器使用右側浮層前面的案例也提到過,適用于篩選條件較多的場景。并且使用側邊欄形式的浮層與篩選按鈕關聯性較高,相對符合用戶認知。體驗細節上可學習的點還有按鈕功能的改變,使得體驗更便捷。



          案例二

          Image title案例來源于dribbble


          篩選按鈕位于界面右下方但沒有貼屏邊,篩選器以底部分層形式從底部向上展開。這里的篩選條件不多,因此使用了底部分層形式。



          案例三

          Image title

          案例來源于dribbble


          篩選按鈕形式與上一案例相似,不同的是篩選按鈕處直接顯示篩選條件,可得知此內容區目前被篩選維度為“30M”。此樣式適用于篩選條件為同一維度的場景。


          點擊按鈕后,從按鈕下層展開扇形篩選器,滑動選擇篩選條件。此種篩選器樣式使用場景較局限,多為選擇時長或數量,并且單選居多。因此篩選器不需要“確定按鈕”,只需放“關閉按鈕”即可。這里的篩選器也可根據不同的場景選擇其他的形式。



          04


          舉一反三


          接下來我們拿個案例練練手。


          下圖界面中內容區為概覽與各監控數據圖表,需要設計一個篩選組件對內容區進行不同時段的篩選。


          Image title


          在設計之前需要確定幾個需求:篩選組件的使用頻次、篩選類別的數量、篩選項的數量,單復選關系、篩選條件之間的優先級。


          進一步明確需求

          篩選類別只有時間段1項,篩選數量不固定,為多項,單選關系。當用戶進入此頁,根據用戶使用需求判斷“1小時”基本滿足用戶查看數據的需求,默認展示“1小時”的篩選。因此篩選組件此場景使用“1小時”時段基本滿足用戶查看數據的需求,可判斷用戶使用篩選組件的頻次不高。


          Image title


          方案解析

          方案一,Tab欄形式

          Tab是對整頁的篩選,多為不同維度,而這里只有時段一個維度。

          Tab所處位置為視覺熱點區域附近,但用戶對篩選組件的需求并不高,放在此位置占用了概覽區空間。


          方案二,底部按鈕形式

          底部按鈕位于用戶的習慣操作區,放這里使用層級略高,并且會使內容區的整體高度減少。


          方案三,浮層按鈕形式

          位于右下角的浮層按鈕在頁面中屬于視覺薄弱區域,可以使用戶瀏覽時不受按鈕影響;但按鈕擁有強對比色,在有篩選需求時滿足使用需求。

          篩選器以時間選擇器形式出現,可滿足篩選項數量較多的場景。



          05


          小結


          以上內容是我對常見篩選組件的思考,每一種樣式都有其優缺點。但我們設計篩選組件的最終目的是幫助用戶篩選信息,決策。這就需要設計師根據篩選需求、用戶習慣等設計符合用戶使用場景的操作體驗。



          本文作者:TXD技術體驗團隊-喻杰(阿里巴巴視覺設計師)

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


          CSS學習-選擇器

          seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          選擇器

          學習目的 熟練使用 css 選擇器


          css1 中的選擇器


          E #myid         id選擇器

          E .warning      類選擇器

          E F             包含選擇器

          E:link          定義超鏈接未被訪問

          E:visited       定義超鏈接已經被訪問

          E:actice        匹配被激活的元素

          E:hover     鼠標經過的元素

          E:focus     獲取焦點

          E::first-line   元素第一行

          E::first-letter 元素第一個字符


          css2


          *               通配選擇文檔中所有元素

          E[foo]          包含foo屬性的元素

          E[foo="bar"]    包含屬性foo值為bar的元素


          CSS3 中的選擇器可替代 了解即可

          E[foo~="bar"]  含有屬性foo值包括bar的元素例如 <a foo="bar bar1 bar2">link</a>

          E[foo|="en"]    屬性值是一個“-”分割的 比如 en-us


          E:first-child   父元素的第一個子元素

          E:lang(fr)      匹配屬性,元素顯示內容為語言為 fr

          E::before       在元素前面插入內容

          E::after        在元素后面插入內容

          E>F             子包含

          E+E             相鄰兄弟選擇器 后面的兄弟


          css3


          E[foo^="bar"]   屬性foo的值開頭是bar

          E[foo$="bar"]  屬性foo的值得結尾是bar

          E[foo*="bar"]   屬性foo的值包含bar <a foo="abc_bar_as">link</a>


          結構類選擇器


          E:root          屬性文檔所在的根元素

          E:nth-child(n)  E元素第n個位置的子元素 n可以是 (1,2,3) 關鍵字(odd,even) 公式(2n,2n+3) 起始值為1

          E:nth-last-child(n) 與上面的使用方法一樣 倒數的第N個位置的子元素

          E:nth-of-type(n)    匹配父元素中與E相同的元素中的第n個元素

          E:nth-last-of-type(n)   匹配父元素中與E相同的倒數第n個元素

          E:last-child    選擇位于其父元素的最后一個位置,且匹配E的子元素

          E:first-of-type 選擇在其父元素中匹配E的第一個同類型的子元素

          E:last-of-type  選擇在其父元素中匹配E的最后一個同類型的子元素

          E:only-child    選擇其父元素只包含一個子元素,且該子元素匹配E

          E:only-of-type  選擇其父元素只包含一個同類型的子元素,且該子元素匹配E

          E:empty         選擇匹配E的元素,且該元素不包含子節點,文本也是節點


          E~F 通用兄弟選擇器

          E:not(s)    否定偽類選擇器


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務。



          在iPhone的UI設計背后,是一場關于注意力的戰爭 2018/09/06in 設計文章 & 教程評論區

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          iPhone 誕生之后,世界發生的變化是翻天覆地的。以電容觸摸屏為交互中心的智能手機以難以想象的速度,成為了人類生活中不可分割的部分,人與人之間的連接因此而更加緊密,同時也更加疏遠。從某種意義上來說,iPhone 的創造是開創性的,也是不可替代的。而我們也不約而同地發現,以iPhone 為標竿而創造的智能手機和數字化的交互界面,讓我們處于一個時刻都會被分心的境地。

          令人上癮的數字內容,讓我們一刻都離不開智能手機,從某種意義上,它徹底改變了我們的生活,工作,甚至思考的方式。現如今,越來越多的人開始嘗試戒除令人上癮的智能手機,尋找更加健康自由的人機關系。根據今天的調研,過度使用智能手機,確實會有一定機率帶來心理健康的問題。從 iPhone 誕生之初,直到10年后的現在,在數字產品上癮和用戶注意力的控制這件事情上,開發團隊本身就沒有放松過。這次,Fast Company 專訪了前蘋果設計師 Imran Chaudhri。

          Imran Chaudhri 早在 1995 年就加入了蘋果公司,并且很快就出任了公司的人機交互界面組的設計總監,在2006年前后,他也是作為 iPhone 項目核心的6人團的一員,加入到項目當中來。

          待在蘋果的20多年時間里,他參與了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等幾乎全部主要產品的用戶界面的設計,直到他開始追求創造屬于自己的公司和事業,才正式從蘋果離職。也正是因為這樣的契機,才使得 Fast Company 有機會能和他面對面地一起聊一聊他的過去,以及他留給蘋果的那些遺產。

          和許多設計師一樣,他們對于產品的想法和企業的定位或多或少有一些錯位。和蘋果產品相關的很多信息,他現在依然還不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型設計階段,他就已經意識到了,這款產品最大的缺陷之一,就是它注定會分散甚至壟斷用戶的注意力。而與此同時,蘋果也有意識的沒有給予用戶,對于iPhone 完全的控制權。下面,是訪談中能夠對外公布的幾個重要的內容摘錄:

          設計「請勿打擾」的功能

          「我認為,從某種意義上來說,真正洞悉設計的設計師,大都能夠預見到手機對于注意力的影響。在使用手機的時候,我們總會碰到被各種各樣的信息和通知打擾到。」

          「早些時候,當我剛剛開始制作 iPhone 的原型之時,管束還不是那么多,我們當中有幾個人還有幸把原型機帶回家,這樣就可以每天工作生活都使用它。那個時候我全世界各地的朋友都和我保持著聯系,iPhone 幾乎隔一會兒就會亮一下,顯示有新消息,叮叮咚咚響個不停,于是我意識到,和我們朝夕相處的手機需要一個管控功能。所以,在很早的階段,我就開始設計請勿打擾這個功能了?!?

          對于誰來掌控手機設備這個事,蘋果的內部產生了分歧

          「其實,在蘋果公司內部,想要大家都理解分心是一個影響用戶生活的問題,還挺難的。喬布斯倒是很能理解的,但是公司內其他的同事,對于用戶對于手機的控制權多少,其實大家還存在不少爭議。我和一部分同事倡議給用戶更多的掌控權,不過這個事情對產品的營銷和市場運作是有影響的。所以,當時內部也有聲音說,如果真的給用戶太多的控制權,那么這款手機就不酷了?!?

          「其實直到今天,iPhone 當中絕大多數的功能都是可控的,但是其中很多功能隱藏的比較深,徹底的掌控它們是比較困難的,如果你真得想讓那些整天都在轟炸你的信息徹底遠離,你需要花費很長的時間來摸索,用獨特的方式逐個調整或者關閉才行。因此,對于那些熟練使用iPhone 的重度用戶而言,確實是可以如臂使指地掌控這臺設備,但是對于更換壁紙都不太會的用戶,想要搞清楚iPhone ,讓它如意隨心,真的是難如登天。他們沒有這樣的控制能力?!?

          關于 iPhone 是否有可能更智能地預測通知

          「你可能會在一個下午安裝十幾個不同的新應用,然后你不停地會收到提醒和通知,是否要授權使用相機,是否要授權獲取你的位置,是否允許它給你發送通知,每個都要做決定。稍后,你可能會發現,Facebook 一直在后臺給你推送信息。再之后你就會發現你有睡眠障礙了,總會有信息大半夜地推送到你的眼前,讓你無法安生地休息。實際上,借助請勿打擾的功能,你可以一早上再查看它們。這套系統足夠智能,能夠判斷出哪些應用之前就已經獲得了許可,哪些仍然在后臺獲取數據,哪些通知實際上你并不關心。所以,這套系統其實是會選擇更加恰當的時機和正確的方式來建立用戶和手機之間的對話和關系,手機會詢問用戶,你真的需要這些通知嗎?或者是,你真的需要Facebook 使用你的電話簿的信息嗎(因為你已經很久沒有登錄了)?等等。正確地設計了這套系統之后,提醒用戶的方式也非常的多?!?

          為什么蘋果最后還是開始關注分心這個事情?

          「iOS 12 中內置的這套防干擾的控制系統可以更加系統地監控手機各方面的功能和用量,它實際上是從iOS 6 時代的請勿打擾的功能拓展而來的。但是它在現在被推出來真正的原因是有太多的用戶為此而抱怨,而媒體和用戶都發文吐槽,在呼聲和壓力之下,它們最終在iOS 12 中呈現了出來。這個局面之下,蘋果沒有選擇的余地,必須對于輿論有回應。這對于每個人都是好事,因為用戶和他們的孩子都因此能夠獲得更好的產品。但是這是否是最好的產品?當然算不上,因為現在的iOS系統是為了應對輿論和負面新聞而設計的,設計的意圖并不對。如果是蘋果主動作出這樣的決策,才算得上是好產品。」

          「對于蘋果這種體量的大公司而言,產品設計其實復雜性非常的高。真的是這樣。作為設計師,你需要服務于你的用戶,你還得和公司的利益保持一致,同時,還需要對得起自己的底線和道德。服務于一個大型的企業,確實非常的難做抉擇。對于用戶而言,可以很輕松的直接懟蘋果,說它沒有做對的事情。但是身為其中的設計師,要平衡各方面的需求也壓力,經常會進退維谷。有些用戶因為iPhone 的一些功能,受到了負面的影響,有些人受到的影響比另一部分人更多。但是身為設計師,一個受到各方面制衡的設計師,即使是作出了改變,在很多時候也遠遠不夠。至少在我看來,現在的改變還不夠大?!?

          管理數字化的生活,就像管理健康一樣重要

          「我和數字設備之間的關系非常簡單。我不希望被它所控制。從使用 iPhone 的第一天起,我就用著黑色的壁紙。我不會將一大堆的東西塞進手機,減少被分心的可能性。我的手機第一屏上的應用程序非常少?!?

          「我的意思并不是說這樣做很重要,或者說我推薦這么做,對于人和手機之間的關系,每個人都不一樣,處理方式也都很個人。對于如何處理自己和手機之間的關系,有人讓我提一些建議,我覺得沒有必要,因為我的辦法并不適合所有人。一天喝多少咖啡,抽幾包煙,每個人的情況都不一樣,沒法一概而論。不過,心理健康是一件大事,你和你的智能設備之間,應該保持著平等的關系。這至少是一個大的設計趨勢,是設計師需要關注的焦點。就像可持續性發展已經成為時代的主流訴求一樣,你無法忽視認知壓力的存在,認知設計也勢在必行?!?

          界面設計的未來,以及不可避免的問題

          「我觀察到,界面設計在很自然地進化和發展著,從按鈕到旋鈕,從點擊到手勢操作,從語音交互到情感化設計,均是如此。無論是考慮到用戶的情感訴求,還是進入語音交互的領域,都一定會遭遇一大堆的問題。按鈕和旋鈕的設計是需要考慮到人體工程學的問題,點擊和手勢的交互則牽涉到更具體的壓感和硬件上問題。任何人和機器之間的交互,都一定都會遭遇不自然的狀況和問題,就這么簡單。身為設計師,需要足夠的預見性,才能真正領先于用戶,預測到可能會遭遇的問題?!?

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

           

          bootstrap table實現x-editable的行單元格編輯及解決數據Empty和支持多樣式

          seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          前言

          • 最近在研究bootstrap table的表格的單元格編輯功能,實現點擊單元格修改內容,其中包括文本(text)方式修改,下拉選擇(select)方式修改,日期(date)格式修改等。
          • 本文著重解決x-editable編輯的數據動態添加和顯示數據為Empty的問題,還有給表格單元格的內容設置多樣式,使得顯示多樣化。
          • 由于官網給的demo的數據都是html文件里寫好的,select類型的不能動態添加(所以網上的大多都是官網的類似例子,本篇博客就是在這種情況下以自己的經驗分享給大家,有問題可以留言哦),一旦動態添加就會出現顯示數據為Empty,我表格原本是有數據的,但是一用這個插件就把數據變成Empty了,這可不是我想要的,所以筆者就自行解決了這個問題。

          對比網上的例子

          • 比如以下這種數據不是Empty的例子,但是是由于在html中寫死了數據(awesome),不適合動態添加。
          <a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $(function(){ $('#username').editable({
                  url: '/post',
                  title: 'Enter username' });
          }); </script>
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 另外一種就是使用bootstrap table動態添加的,但是select類型就會出現數據為Empty的情況。
          $('#db_dependences').bootstrapTable({
                  method:'POST',
                  dataType:'json',
                  contentType: "application/x-www-form-urlencoded",
                  cache: false,
                  striped: true, //是否顯示行間隔色 sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*) showColumns:true,
                  pagination:true,
                  minimumCountColumns:2,
                  pageNumber:1, //初始化加載第一頁,默認第一頁 pageSize: 10, //每頁的記錄行數(*) pageList: [10, 15, 20, 25], //可供選擇的每頁的行數(*) uniqueId: "id", //每一行的唯一標識,一般為主鍵列 showExport: true,                    
                  exportDataType: 'all',
                  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //導出文件類型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                          success: function (data, status) { if (status == "success") {
                                  alert("編輯成功");
                              }
                          },
                          error: function () { alert("Error");
                          },
                          complete: function () { }
                      });
                  },
                  data: [{
                      id: 1,
                      name: '張三',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 2,
                      name: '王五',
                      sex: '女',
                      time: '2017-08-09' }, {
                      id: 3,
                      name: '李四',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 4,
                      name: '楊朝來',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 5,
                      name: '蔣平',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 6,
                      name: '唐燦華',
                      sex: '男',
                      time: '2017-08-09' }],
                  columns: [{
                      field: 'id',
                      title: '序號' }, {
                      field: 'name',
                      title: '姓名',
                      editable: {
                          type: 'text',  
                          validate: function (value) { if ($.trim(value) == '') { return '姓名不能為空!';  
                              }  
                          }
                      } 
                  }, {
                      field: 'sex',
                      title: '性別',
                      editable: {
                          type: 'select',
                          pk: 1,
                          source: [
                              {value: 1, text: '男'},
                              {value: 2, text: '女'},
                          ]
                      }
                  },  {
                      field: 'time',
                      title: '時間',
                      editable: {
                          type: 'date',
                          format: 'yyyy-mm-dd',    
                          viewformat: 'yyyy-mm-dd',    
                          datepicker: {
                              weekStart: 1 }
                      } 
                  }]
              });
              
          • 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
          • 46
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56
          • 57
          • 58
          • 59
          • 60
          • 61
          • 62
          • 63
          • 64
          • 65
          • 66
          • 67
          • 68
          • 69
          • 70
          • 71
          • 72
          • 73
          • 74
          • 75
          • 76
          • 77
          • 78
          • 79
          • 80
          • 81
          • 82
          • 83
          • 84
          • 85
          • 86
          • 87
          • 88
          • 89
          • 90
          • 91
          • 92
          • 93
          • 94
          • 95
          • 96
          • 97
          • 98
          • 99
          • 100
          • 101

          結果圖如下:

          這里寫圖片描述

          由于開源,很快就找到原因,由于formatter我們沒有寫這個function導致調用的默認的formatter,默認的沒有把表格的值傳入html中,bootstrap-table-editable.js源碼如下,初始定義_dont_edit_formatter為false,我們沒有實現noeditFormatter的function就會執行第二個if語句,其中的標簽中沒有對內容賦值,導致最后顯示結果為它默認的Empty:

          column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;
          
                          $.each(column, processDataOptions);
          
                          $.each(editableOptions, function(key, value) {
                              editableDataMarkup.push(' ' + key + '="' + value + '"');
                          }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) {
                              _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
                          } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                                  editableDataMarkup.join(''), '>' + '</a>' ].join('');
                          } else { return _dont_edit_formatter;
                          }
          
                      };
              
          • 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

          由于要實現多樣式,則把上面的代碼改變,并在使用的時候實現noeditFormatter:function(value){…}就是了。將上面的代碼改為如下(此為我自己改的,你可以根據自己的需要做修改):

          column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;
          
                          $.each(column, processDataOptions);
          
                          $.each(editableOptions, function(key, value) {
                              editableDataMarkup.push(' ' + key + '="' + value + '"');
                          }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) { var process = column.editable.noeditFormatter(value, row, index); if(!process.hasOwnProperty('class')){
                                  process.class = '';
                              } if(!process.hasOwnProperty('style')){
                                  process.style = '';
                              }
                              _dont_edit_formatter = ['<a href="javascript:void(0)"', ' data-name="'+process.filed+'"', ' data-pk="1"', ' data-value="' + process.value + '"', ' class="'+process.class+'" style="'+process.style+'"', '>' + process.value + '</a>' ].join('');
                          } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                                  editableDataMarkup.join(''), '>' + value + '</a>' ].join('');
                          } else { return _dont_edit_formatter;
                          }
          
                      };
              
          • 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

          結果如下:

          這里寫圖片描述

          這里寫圖片描述

          然后是bootstrap table的使用js文件,在其中實現noeditFormatter函數。返回的result必須包含filed和value,class和style可以不需要,class可以額外用其它插件之類,比如badge,style是增加樣式(背景,顏色,字體等)。

          $('#db_dependences').bootstrapTable({
                  method:'POST',
                  dataType:'json',
                  contentType: "application/x-www-form-urlencoded",
                  cache: false,
                  striped: true, //是否顯示行間隔色 sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*) showColumns:true,
                  pagination:true,
                  minimumCountColumns:2,
                  pageNumber:1, //初始化加載第一頁,默認第一頁 pageSize: 10, //每頁的記錄行數(*) pageList: [10, 15, 20, 25], //可供選擇的每頁的行數(*) uniqueId: "id", //每一行的唯一標識,一般為主鍵列 showExport: true,                    
                  exportDataType: 'all',
                  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //導出文件類型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                          success: function (data, status) { if (status == "success") {
                                  alert("編輯成功");
                              }
                          },
                          error: function () { alert("Error");
                          },
                          complete: function () { }
                      });
                  }, //      onEditableHidden: function(field, row, $el, reason) { // 當編輯狀態被隱藏時觸發 //          if(reason === 'save') { //              var $td = $el.closest('tr').children(); //          //    $td.eq(-1).html((row.price*row.number).toFixed(2)); //          //    $el.closest('tr').next().find('.editable').editable('show'); //編輯狀態向下一行移動 //          } else if(reason === 'nochange') { //              $el.closest('tr').next().find('.editable').editable('show'); //          } //      }, data: [{
                      id: 1,
                      name: '張三',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 2,
                      name: '王五',
                      sex: '女',
                      time: '2017-08-09' }, {
                      id: 3,
                      name: '李四',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 4,
                      name: '楊朝來',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 5,
                      name: '蔣平',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 6,
                      name: '唐燦華',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 7,
                      name: '馬達',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 8,
                      name: '趙小雪',
                      sex: '女',
                      time: '2017-08-09' }, {
                      id: 9,
                      name: '薛文泉',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 10,
                      name: '丁建',
                      sex: '男',
                      time: '2017-08-09' }, {
                      id: 11,
                      name: '王麗',
                      sex: '女',
                      time: '2017-08-09' }],
                  columns: [{
                      field: 'id',
                      title: '序號' }, {
                      field: 'name',
                      title: '姓名',
                      editable: {
                          type: 'text',  
                          validate: function (value) { if ($.trim(value) == '') { return '姓名不能為空!';  
                              }  
                          }
                      } 
                  }, {
                      field: 'sex',
                      title: '性別',
                      editable: {
                          type: 'select',
                          pk: 1,
                          source: [
                              {value: 1, text: '男'},
                              {value: 2, text: '女'},
                          ],
                          noeditFormatter: function (value,row,index) { var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                          }
                      }
                  },  {
                      field: 'time',
                      title: '時間',
                      editable: {
                          type: 'date',
                          format: 'yyyy-mm-dd',    
                          viewformat: 'yyyy-mm-dd',    
                          datepicker: {
                              weekStart: 1 },
                          noeditFormatter: function (value,row,index) { var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                          }
                      } 
                  }]
              });
              
          • 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
          • 46
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56
          • 57
          • 58
          • 59
          • 60
          • 61
          • 62
          • 63
          • 64
          • 65
          • 66
          • 67
          • 68
          • 69
          • 70
          • 71
          • 72
          • 73
          • 74
          • 75
          • 76
          • 77
          • 78
          • 79
          • 80
          • 81
          • 82
          • 83
          • 84
          • 85
          • 86
          • 87
          • 88
          • 89
          • 90
          • 91
          • 92
          • 93
          • 94
          • 95
          • 96
          • 97
          • 98
          • 99
          • 100
          • 101
          • 102
          • 103
          • 104
          • 105
          • 106
          • 107
          • 108
          • 109
          • 110
          • 111
          • 112
          • 113
          • 114
          • 115
          • 116
          • 117
          • 118
          • 119
          • 120
          • 121
          • 122
          • 123
          • 124
          • 125
          • 126
          • 127
          • 128
          • 129
          • 130
          • 131
          • 132
          • 133
          • 134
          • 135
          • 136
          • 137
          • 138
          • 139
          • 140
          • 141
          • 142
          • 143

          關于bootstrap table的導出及使用可以看我另外一篇博客。

          下載和引用

          下載x-editable,并如下引用。

          <link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script> <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>
              
          • 1
          • 2
          • 3

          然后講上訴的一些文件修改添加,就完成了。

          另外項目的結果展示

          這里寫圖片描述

          這里寫圖片描述

          其中的樣式都是自行在x-editable的基礎上添加的。如配置出問題,以下是源碼鏈接。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          博博

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          UI巴巴 2018-07-17 21:53:05

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          很少有創新的事物能像手機應用一樣在改變我們的生活方式,讓我們與周圍的世界互動。最開始的那500個開發者很幸運的有機會為未來數百萬個應用程序提供設計方向和交互方式,為了慶祝App Store成立10周年,讓我們來研究一下10個原創的App Store應用程序的界面設計演變。

          一、應用程序

          關于應用程序這部分,我們關注的10款應用到今天為止都還能下載的,有些近幾天都還在更新。雖然很多應用提供了iPad版,但是這次我們主要研究iphone版的界面設計的變化。

          1,iTunes Remote

          Apple通過在App Store上發布一些自己的軟件,為其他開發人員樹立了榜樣。Apple最初創建的應用有兩個:Texas Hold'em(德州撲克游戲)和Remote,Texas Hold'em在2011年下架了。而Remote今天還在,Remote是一個簡單實用的應用,通過Wi-Fi控制Mac或Apple TV的iTunes庫的播放。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          從一開始,Remote的設計就受到iPhone iPod應用程序(今天稱為音樂)的界面和感覺的影響很大。事實上,正在播放的視圖在界面上基本相同。2.0版帶來了由Louie Mantia設計的新圖標。這兩個應用程序從iOS 6開始,變得不一樣,圖標再次更新以匹配Mac上iTunes 11的設計風格。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          Remote 的一次全新設計發生在iOS 7,與音樂應用程序的鮮明白色主題不同,Remote采用了深色的模糊背景。并與專輯封面的顏色融合。2016年,Apple發布了針對第4代Apple TV 的Apple TV Remote應用程序,這是改變似乎要取代Remote。但不久之后,Remote被重命名為iTunes Remote,該應用程序一直保持原來的界面繼續可供下載,直到今年6月,Remote才更新了全新設計并支持iPhone X。

          2,Facebook

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          與iTunes Remote的更新相比,Facebook在過去時間不斷改進設計,而且修改的頻率越來越高,算上小修小補,Facebook都可以出書了。我們選了其中比較重大的8個變化。

          Facebook在2017年10月就開始在iPhone上使用了,那時候是作為網頁版應用。如果不顯示頂部的藍色導航,App Store中Facebook 1.0版幾乎無法識別。而且圖標是用人物頭像,而不是標志性的“f”。底部導航為:主頁,個人資料,朋友,聊天和收件箱。2.0版基于相同的設計概念,在主標題欄下添加了二級導航。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          Facebook 3.0于2009年7月首次亮相,并推出了3×3網格圖標,以幫助解決應用程序的氣球導航問題。早期的屏幕截圖顯示了一個完全藍色的平鋪網格,但這個設計從未在應用程序的公共版本中發布。

          2011年10月,Facebook 4.0 采用了漢堡包導航。在第4版之后,Facebook的設計更新變得更頻繁了。應用程序的界面開始更快地迭代,并且設計的修改通常是逐步推出而不是推倒重來。

          2013年4月,Facebook在iOS應用程序中使用“Chat Heads ”,允許用戶一邊爪機一邊聊天。

          Facebook的設計挑戰主要來自其億級別的用戶基數。與許多小型應用程序不同,Facebook必須在各平臺上為大量的用戶提供一致的體驗,而不僅僅是蘋果的設備上。2017年8月的更新嘗試統一 iOS,Android和網絡上的新聞Feed 設計,其評論樣式看起來更像是Messenger對話設計。

          3,Things

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          Things原來上Mac上的任務管理工具,所以有機會率先在iOS上出現。開發人員Cultured Code稱,iOS的應用只用了1個月就開發完成,完成了一項不可能的任務。

          Things 1.0 不能與Mac同步,而且不能標記。下圖是早期的設計草圖。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          2012年發布的2.0版本是比較大的一次更新。背景變得更干凈了。圖標也更小巧精致有個性。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          2014年的2.5版本,設計變得扁平化,顏色更淺。2017年5月發布的應用是界面上最大的一個變化。布局差不多,但是圖標和ui元素都重新設計。設計師Cultured Code特別強調了如何使用動畫為應用程序提供全新的感覺。重新設計的應用獲得了2017年Apple設計獎。

          4,OmniFocus

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          App Store從一開始就提供了很多任務管理類的應用,來自Omni公司的Things和OmniFocus是兩個重量級應用。雖然兩個功能類似,但是兩個應用的界面設計發展軌跡卻各有千秋。

          OmniFocus for iPhone最初使用簡單的桌面視圖和自定義底部導航,贏得了2008年Apple設計獎。Omni Group在2010年6月為iPhone 4 重新設計了高清圖標。而2011年6月開始,界面發生了重大變化,頭部多了一個日期選擇。2013年針對iOS 7的推出,設計的界面變得扁平化。新的設計依賴顏色來提升空間感。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          2015年春季的app 圖標更新使用了黑色的“??”。從2012年開始,每個圖標都包含了彩蛋。圖標放大,您會注意到碳纖維紋理實際上是由微小的重復Omni徽標組成。

          5,Evernote

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          Evernote的發展代表了很多軟件自2008年以來的設計趨勢。Evernote原來是在電腦端出現的,App Store推出之后,Evernote更為識別性高的大象圖標。

          像許多早期的iPhone應用程序一樣,Evernote 1.0嚴重依賴于UIKit,大量使用高光效果。2011年重新設計了標簽欄,按時間順序排列筆記。Evernote在2012年推出了針對iPhone 5的新界面,但是仍然使用默認的iOS UI元素。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          2012年11月,Evernote 5推出了全新的界面設計。采用了卡片式的展示方式。浮雕效果,陰影效果的運用看上去更有深度。

          2013年開始,Evernote 全面擁抱扁平化設計。每個紋理,陰影和斜角都消失了。一個明亮的從左到右的漸變條紋的導航欄設計,與新的無紋理圖標上使用的顏色相匹配。2017年開始,設計又進一步極簡化。白色的頭部導航,黑色的底部標簽欄。

          6,eBay

          看看蘋果App Store 10年來那些應用設計演變引領的潮流
          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          eBay的設計可以說是這篇文章中10個應用程序中最引人注目的轉變。在WWDC 2008上,eBay特別的登臺展示。但與今天的app相比,最初的版本是相當的簡陋。2009年11月,整個界面的背景換成了灰色。

          一年后的2.0版本才是真正的設計,也為未來幾年的設計奠定了基礎。

          2013年的設計像是重新披了一件外衣,而用戶體驗跟以前保持一致。

          每個版本的變化都反映了整個時代快速變化的設計趨勢,設計品味。

          2015年9月,eBay 4.0 打破了常規。大多數應用程序的功能都放在漢堡包菜單下面,只留下頂部的三個標簽:“活動,商店,銷售?!比缓筮@個設計很快沒有繼續了,2016年,ebay又重新恢復了原來的布局方式。如今的布局與2010年相比,又更加類似了。

          7,Twitterrific

          看看蘋果App Store 10年來那些應用設計演變引領的潮流
          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          在App Store宣布之前,Craig Hockenberry和The Iconfactory為iPhone 設計了第一個 Twitter客戶端。應用是放在越獄市場的。

          App Store上的Twitterrific 1.0從越獄版上借鑒了一些設計元素。它獲得了2008年的Apple設計獎。Twitterrific也是最早使用如今越來越流行的深色主題的應用程序之一 。但Twitterrific的設計故事更多地講述了Twitter作為服務的歷史,而不是設計趨勢。每次更新都反映了Twitter平臺的特性和功能的變化。在早期,這些功能通常由第三方自己開創的。

          2012年,Twitterrific 5.0將所有導航移動到頂部,并使用完全自定義的UI元素。類似的布局一直持續到今天。就像應用程序的設計一樣迷人,Twitterrific的圖標使用了現代化的鳥類圖像,而且從一開始到現在,基本上沒有什么變化。

          8,Instapaper

          看看蘋果App Store 10年來那些應用設計演變引領的潮流
          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          一個專門為閱讀而設計的應用應該優先考慮內容而不是瀏覽器,因此Instapaper的設計從一開始就是非常自然簡單的。但是,由于iOS本身的變化,應用也在外觀上又一些變化。導航欄和按鈕樣式在iOS 6和7中都進行了更改。

          9,PCalc

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          PCalc的故事從App Store推出的前10年就開始了,開發人員James Thomson 于1992年為Mac 發布了應用程序,并一直延續至今。PCalc從一開始在iOS運行就是完全自定義的界面,并且有很多自定義的選項。

          用于iPhone的PCalc 的第一個版本是從Mac儀表盤小部件移植而來。有光澤的按鈕和深藍色LCD面板與應用程序的圖標相匹配。在2008年12月,一個名為Twilight的熱門主題添加了更加詳細的圖形和類似于默認iOS計算器的配色方案。Twilight后來更新了視網膜并支持更大的顯示屏。

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          2013年,PCalc采用了名為“Samurai”的新默認主題和圖標,適配iOS 7的扁平設計。PCalc的圖標在2016年3月再次更新。自iOS 10.3發布以來,Apple已允許第三方應用程序動態更改其應用程序圖標,而無需向商店提交新版本。PCalc于2017年5月開始充分利用該功能,推出了各種各樣的備用圖標供您選擇。

          10,Yelp

          看看蘋果App Store 10年來那些應用設計演變引領的潮流
          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          與Facebook一樣,Yelp的iPhone界面多年來發生了重大變化,但由于使用了一致的導航欄顏色,因此品牌識別度非常高。由于與Apple Maps的深度集成,該應用程序越來越受歡迎。

          2009年8月,Yelp將一個基本的增強現實界面隱藏在iPhone應用程序中,用于定位您周圍的企業。雖然它當時只是一個新奇事物,但鑒于ARKit應用程序的興起,這一功能在今天仍然具有先見之明。

          2010年1月,Yelp主屏幕推出了 3×3網格快捷菜單。界面在風格上不斷完善,直到整個應用程序在2013年10月重新設計,界面更加扁平,更加突出“附近”標簽。

          Yelp的更新通過顯示與您相關的附近的內容,展示更多基于地理位置的內容。

          二、圖標

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          比較所有上面列舉的10個應用的圖標迭代。在過去十年中,一些圖標保持相當一致,只進行了細微的改進,其他圖標每隔幾年就重新設計一次。

          在App Store推出時,高光的圖標設計占統治地位。隨著設計師和開發人員逐漸建立了圖標設計規范和多年來的實踐經驗,細節和更多色彩的運用已經悄悄出現在許多圖標中。

          三、個性

          看看蘋果App Store 10年來那些應用設計演變引領的潮流

          早期的iPhone應用進入的是一個未知的世界,除了蘋果公司自己的小型股票應用外,應用的界面和交互方式沒有先入為主的觀念,設計師和開發人員可以完全自由地進行實驗。

          盡管如此,許多早期的應用看起來感覺非常相似,因為用戶和開發者都在互相測試。早期的反饋和反復試驗很快就會影響每個應用的發展方式。然而幾年內,大多數應用都找到了自己的方式,并開發出獨特的風格和個性。隨著硬件功能的改進,設計差異逐漸從靜態圖形轉變為動畫和動態界面。

          在iOS 7引入的設計規范將設計人員和開發人員又重新拉回來,許多應用開始通過感官體驗選擇來區分自己,而不僅僅是界面設計的不一樣。所以用戶體驗的重要性導致近年來用戶體驗(UX)設計的普及。

          四、未來10年

          2008年,誰也無法準確預測App Store會發展到如今的繁榮。創新源于創新,iPhone用戶的品味和習慣塑造了開發人員不斷的創新。

          可以說,未來是不可預測的,即將推出的iPhone和iOS版本肯定會以不可預見的方式改變應用的格局。一個新的設計趨勢明天將席卷全球。即使在10年后,未來也是令人興奮的。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          博博

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          UI巴巴 2018-08-09 20:34:25


          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          圖表是顯示大量信息的一種重要表達方式,良好的圖表設計能夠傳達復雜的統計數據,并讓用戶易于理解。圖表設計可以專門分出一個設計類別:信息圖設計。

          不過,信息圖設計更多針對桌面端,很少考慮移動端,所以,移動端的圖表設計挑戰性更大。在小的屏幕上展示數據或信息,只能做一些取舍。

          Android - 統計數據圖表

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          Arco的圖表和圖表

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          股票應用設計

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          Analytics(分析)

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          移動儀表盤

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          優化 - 統計

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          移動UI中的圖表和圖形

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          金融應用

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          財經和新聞應用

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          支付帳單

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          線圖頁面

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          分析應用頁面

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          分析應用

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          健康應用

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          自行車比賽

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          威脅儀表盤設計

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          儀表盤設計

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          圖表

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          足跡App

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          管理模塊

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          紫色的圖表和圖形

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          運動追蹤應用

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          關于鐵的圖

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          Noblyn App重新設計

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          投資平臺

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……

          跟蹤應用

          還在為APP UI信息圖表界面設計而犯愁嗎?來看這就夠了……


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          你知道設計風格里的“等距風格”是啥怎么畫不?

          博博

          你知道設計風格里的“等距風格”是啥怎么畫不?

          UI巴巴 2018-08-16 20:26:18

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          1.等距是什么?

          等距視圖是指,繪制物體時每一邊的長度都按繪圖比例縮放,而物體上所有平行線在繪制時仍保持平行的一種顯示方法。

          最早是出現在電腦應用程式的圖像,以及早期的8位元電子游戲,近幾年來的被廣泛的使用在因特網、GUI(Graphic User Interface)以及行動游戲等等。

          2.等距視圖游戲的歷史

          雖然計算機游戲的歷史一直在20世紀70年代初期就看到了一些真正的3D游戲,但是第一個使用上述意義上的等距投影的不同視覺風格的視頻游戲是20世紀80年代初的街機游戲。

          1)20世紀80年代 

          你知道設計風格里的“等距風格”是啥怎么畫不?

          高速公路遇襲(1985年)

          等距視圖是一種把2D游戲偽裝為3D游戲的顯示方法。使用這種方法的游戲有時候會被稱作偽3D或2.5D

          你知道設計風格里的“等距風格”是啥怎么畫不?

          蝙蝠俠(1986年)

          執行等距視圖的方法有很多,但為了簡化,最有效最常用的一種——貼圖法。從上面兩張圖可以看出,其上覆蓋的菱形網格把地形劃分貼圖。

          2)20世紀90年代 

          你知道設計風格里的“等距風格”是啥怎么畫不?

          最終幻想III(1997)

          你知道設計風格里的“等距風格”是啥怎么畫不?

          文明六世(2016)

          在貼圖法中,各個視覺元素都被切分為更小的部件,稱為“貼圖”,都是標準尺寸的。根據預先確定的平面數據——通常是2D數組,這些貼圖被組織成游戲世界。

          3)目前,2000

          你知道設計風格里的“等距風格”是啥怎么畫不?

          SOCIOBALL(2015)

          你知道設計風格里的“等距風格”是啥怎么畫不?

          紀念碑谷 (2016)

          3.等距風格的圖標、插畫及應用范圍

          這種插畫有一個專門的名字叫“isometric”。

          應用范圍很廣,比如:icon、界面、啟動頁、插畫、游戲、動畫視頻等等。

          你知道設計風格里的“等距風格”是啥怎么畫不?

          圖標

          你知道設計風格里的“等距風格”是啥怎么畫不?

          字體

          你知道設計風格里的“等距風格”是啥怎么畫不?

          插畫

          你知道設計風格里的“等距風格”是啥怎么畫不?

          海報

          你知道設計風格里的“等距風格”是啥怎么畫不?

          啟動頁

          4.常用繪制軟件

          目前常用的軟件有PS、AI、C4D。

          5.干貨來啦~

          雖然PS/AI都能畫出等距圖標,但是現在有一個軟件Affinity Designer 比它們畫等距圖更加輕松。

          你知道設計風格里的“等距風格”是啥怎么畫不?

          首先畫等距我們需要畫參考線,PS/AI都能畫出來,但是方法還是稍稍顯得復雜了一點,一些基本功不到位的同學會很頭疼這個參考線的畫法。Affinity Designer 的網格和軸管理器十分人性化的解決了這個問題。

          不但對于新手來說是個不錯的選擇,而且它完美的融合了Adobe和sketch兩個原本不相融的軟件。

          你知道設計風格里的“等距風格”是啥怎么畫不?
          你知道設計風格里的“等距風格”是啥怎么畫不?
          你知道設計風格里的“等距風格”是啥怎么畫不?

          網格類型選擇等軸測,這樣網格就會自動生成等距所需要的斜線。

          并且它的網格還可以設置吸附功能,也就是畫的每個元素都可以自動吸附在網格邊緣。

          你知道設計風格里的“等距風格”是啥怎么畫不?
          你知道設計風格里的“等距風格”是啥怎么畫不?

          另外它還有一個十分便捷的功能,它的圖形變形功能也十分強大。鼠標移動到矩形中間節點的會出現上下重疊的箭頭(→),如下圖:

          你知道設計風格里的“等距風格”是啥怎么畫不?

          這樣可以十分輕松的傾斜矩形到任意角度,并且還自動吸附到網格上了。

          你知道設計風格里的“等距風格”是啥怎么畫不?

          拖拽矩形長寬的時候也是根據網格的路徑來,不會影響矩形傾斜的角度。

          你知道設計風格里的“等距風格”是啥怎么畫不?

          輕輕松松畫一個小icon。

          Affinity Designer這個軟件目前只適用于蘋果操作系統,在App Store商店里有售賣。

          案例鑒賞:

          你知道設計風格里的“等距風格”是啥怎么畫不?
          你知道設計風格里的“等距風格”是啥怎么畫不?

          ↑軟件:C4D、3D-MAX、MAYA等大部分3D軟件

          你知道設計風格里的“等距風格”是啥怎么畫不?
          你知道設計風格里的“等距風格”是啥怎么畫不?
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          干貨:看看國際大廠是如何創建UI組件設計規范?

          博博

          干貨:看看國際大廠是如何創建UI組件設計規范?

          UI巴巴 2018-08-20 20:31:25

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          通過本文,你將學習到 Uber ,Pinterest ,Shopify 和 Airbnb 等知名網站如何利用組件構建統一的UI / UX 設計規范 。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          Airbnb通過react-sketchapp將設計與開發之間的組件協作提升到了一個新的水平

          在產品中創建和保持UI和UX的一致性,可以帶給用戶直觀的導航體驗,并引導他們成功地與應用的不同部分進行交互,而不會產生混淆。

          在產品的各個部分和應用之間保持用戶界面的一致性,可以創造更有價值的東西——品牌。將用戶體驗和用戶界面品牌化的關鍵是讓用戶在與新產品互動時也能感到“賓至如歸”,從而提高他們對新產品的的忠誠度和滿意度。

          那么,如何才能構建有效的UI組件設計規范呢?以下有幾個方面需要引起注意。

          1、保持視覺和功能一致性

          干貨:看看國際大廠是如何創建UI組件設計規范?

          功能一致性使你的產品更具可預測性。用戶能夠預測元素的行為方式,這樣即使在第一次訪問的頁面/屏幕上與之交互,他們也能感覺到安全和舒適。

          視覺一致性包括UI的顏色,字體,大小,位置和其他視覺方面,它能幫助用戶識別UI元素并歸類。例如,某種字體顏色可以策略性地用于幫助用戶明白他們按下特定按鈕時會得到什么。

          鑒于目前的行業情況, UI組件還可以作為用戶體驗組件 ,將功能和視覺一致性結合起來。

          基于組件的設計規范可以使應用程序具有視覺和功能上的一致性,這有助于用戶感到賓至如歸,并能夠輕松地得到指導以完成與產品的所需交互。

          2、為什么需要組件設計規范?

          組件是用于UI設計和開發的一種很好的辦法,使用較少的可重用的組件,更好地實現一致性。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          Uber , Pinterest , Airbnb , Walmart ,Atlasssian等公司都通過基于組件的設計規范實現UI的一致性。

          Airbnb的設計工作室在構建他們的設計規范時堅持了這種理念:“ 我們的設計應該是統一的平臺,通過定義明確和可重用的組件來提率”。

          以下是使用組件設計規范的一些優勢:

          1. 它的可重用性促進了UI和UX的一致,因為組件可以在任何被使用的地方創建一致的體驗。

          2. 因為較大的組件由較小的組件組成,因此可以利用原子設計概念實現更好的一致性,從而減少意外的和分離的體驗。

          3. 組件在設計和開發之間提供更好的協作,允許設計語言隨著時間變化而發展。在理想情況下,你在Sketch上看到的是使用React構建的內容。

          4. 從設計方面來看,如字體,排版,主色調和副色調仍然可以指定為組件設計規范的一部分。

          3、建立一致的設計系統

          干貨:看看國際大廠是如何創建UI組件設計規范?

          目前來看,設計規范確實有很多優勢。但是,如何才能真正地創建基于組件的設計規范,使設計人員和開發人員可以利用該規范進行協作?

          在創建基于組件的設計規范前,你必須了解它是什么。UI設計規范不僅僅是一個組件庫,也不僅僅只是組件的顏色,它包括很多方面。對于構成整個產品體驗的基本部分而言,它是一個不斷增長且不斷演變的真實來源。

          因此,在制作第一個組件設計規范之前,你必須設置樣式指南和設計語言來控制這些組件。

          然后,將這些組件的設計原理轉化為代碼來實現,一步步從較小的原子再到較大的組成部分。

          最理想做法的是將所有組件都應該放在一個設計人員和開發人員都可以訪問的位置。通過這種方式,設計人員可以監控隨著時間的推移而發展的設計語言,而開發人員也可以選擇并使用正確的組件。

          4、共享組件庫

          Shopify使用Polaris設計系統,該設計系統包含一個內部反應組件庫,旨在為使用Shopify的商家創建更一致的體驗。Airbnb使用共享組件庫為其生產率帶來了巨大飛躍。

          干貨:看看國際大廠是如何創建UI組件設計規范?
          干貨:看看國際大廠是如何創建UI組件設計規范?

          Pinterest使用格式塔(Gestalt),一個React UI組件庫。它“強化了Pinterest的設計語言。通過執行一系列基本的UI組件來簡化設計人員和開發人員之間的溝通......“

          通過以上的實例不難看出,共享組件庫是實現UI一致性的有效的工具。 在我看來,這種一致性不應該被強制執行,而是自然地實現。

          組件庫基本上是一種在團隊構建應用程序時執行一系列UI組件的方法。但是,開發人員不僅局限于庫的視覺語言,還局限于庫的持續開發。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          當特定應用程序的特定部分需要某個組件時,它可能需要一些調整和修改。設計師和開發人員應該在靈活性和一致性之間找到適當的平衡點。

          共享庫經常會打破這種平衡并減慢開發速度,這反過來又會影響開發團隊對庫本身的采用。在任何需要單個組件的地方強制使用一個龐大的庫也是沒有意義的(關于這個問題我們不要陷入爭論不休的辯論了)。

          要想實現設計人員與開發人員之間的協作,還必須為組件維護一個實時文檔站點,并以某種方式使其可供設計人員和開發人員編輯(Airbnb的react-sketchapp和Figma等工具可以提供幫助)。

          這里有23個常用的React UI庫,點擊即可使用。如果你實現了自己的庫,請記住為開發人員留下足夠的設計空間,從而保持兩者之間的平衡。

          5、Bit -作為構建塊的組件

          Bit是構建組件庫的新趨勢。

          通過使用Bit,你可以組織來自云上不同項目的組件,而無需重構這些項目或現有庫。

          每個組件都可以正在進行的任何項目中發現,使用或開發,同時可以輕松地跨代碼庫進行同步更改。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          每個組件都會顯示一個實時UI操作系統 ,自動解析文檔,測試結果(Bit運行組件單元測試等),以便所有組件都可以被設計和開發團隊發現。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          Bit的工作流可讓你在UI一致性和設計規則之間找到一個更快,更動態的工作流。它也是開源的,所以可以隨意查看。

          6、平衡一致性和靈活性

          丘吉爾曾經說過“改善就是改變,完美就是經常改變”。如果我們過于嚴格地執行一致性,這將會影響創新。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          在我們建立新事物的過程中,我們必須對規則進行適當的調整,預留出一些空間給變量,但不能因為調整讓事物陷入混亂。

          或許這個說法聽起來沒有什么特別之處,但正確的理念,方法和工具可以幫助你實現UI一致性和創新之間的平衡。以下是一些保持平衡有效的建議。

          從設計的角度來看,并非每種風格都應該重新定義和預先定義。

          例如,某個組件(導航欄,項目等)可能與應用程序的其余部分相比具有相對大小或邊距。在不同的情況下,這些變量可能會發生變化,因此可以預留一些空間出來。

          優步和其他團隊使用的另一種有用的方法是將基本/全局/基礎組件與“輔助”組件分開 。

          例如, Uber使用具有超過22種不同顏色和22種值的主要和次要組件,總共484種獨特色調。 創建了70多種獨特模式 - 每個有Uber服務的國家都有一種獨特模式。

          設計人員與開發人員的協作是找到這種平衡的關鍵。一些團隊(如沃爾瑪實驗室 )致力于提高UI組件本身的可重用性,從而縮小與開發人員端的差距。

          干貨:看看國際大廠是如何創建UI組件設計規范?

          正確的工具和工作流程對UI也有很大的幫助,像Bit和Storybook這樣的工具就可以幫助促進這種平衡。

          在別無選擇的情況下,打破一致性、模式 、視覺和文字是一種很好的方式,可以給用戶一種熟悉的感覺并減少混亂。 一致的模式 ,可識別的視覺效果和一致的語氣可以使用戶感覺安全,直觀地與你的產品互動。

          總結

          l 保持UI和UX的一致性可以引導用戶成功與您的產品進行交互。

          l 設計系統是UI / UX不斷發展的主體?;诮M件的設計系統具有視覺和功能一致性。

          l Uber,Airbnb,Pinterest,Netflix和其他優秀團隊使用基于組件的設計系統來創建和發展他們的視覺語言。

          l 要構建組件設計系統,您可以創建庫,使用Bit并利用不同的工具和方法來逐步擴展它。

          l 通過為變量留出空間,使用有用的工具和鼓勵協作文化來平衡一致性和靈活性是很重要的。

          l 切記:平衡和協作就是一切。這不是一項單一的工作,而是設計師和開發人員共同進行的持續旅程。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          比起設計和開發流程的選擇,還有幾個事情更重要

          資深UI設計者



          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          在 Sarah 給 Jimmy 講完了她在設計上的一些原則之后,Jimmy 就準備開始重新設計那個客戶等著要的新的儀表盤界面了。與此同時,他所在的公司 Shmuckle 準備設置一個新的產品經理的職位,并且將會在公司內部選擇合適的人員來任職。Jimmy 對此非常有興趣,實際上,在當前的架構下, Jimmy 是一個非常合適的候選人。但是要擔任這個職位,他必須證明自己能夠勝任這個職位,證明自己知道如何管理項目和團隊。

          對于他正在做的這個控制面板的設計項目,他也正在挑選合適的產出流程。用敏捷(Agile)開發流程更好,還是應該用瀑布模型(Waterfall Model)?又或者是循環式開發流程?他覺得跟開發部的同事聊一聊會是更好的選擇。

          當他找到工程部的 Boris 的時候,他正在樓道里刷推特摸魚。「用什么流程?那還用問,當然是敏捷啦。這個最好,過程清晰簡單,現在沒有什么辦法比敏捷更好處理各種數字產品的設計和開發啦?!菇又珺oris 去隔壁會議室拖出一個白板,并且說道:「給我一個小時,我告訴你關于敏捷開發的一切。接著還能捎帶計劃一下每周的工作內容,這樣你就能完全明白要干啥了。哦,差點忘了,還有幾個播客和視頻可以幫你更加深入地了解敏捷。」

          敏捷開發以用戶的需求進化為核心,采用迭代、循序漸進的方法進行軟件開發。在敏捷開發中,軟件項目在構建初期被切分成多個子項目,各個子項目的成果都經過測試,具備可視、可集成和可運行使用的特征。換言之,就是把一個大項目分為多個相互聯系,但也可獨立運行的小項目,并分別完成,在此過程中軟件一直處于可使用狀態。

          絮絮叨叨的 Boris 終于找到一個傾訴的對象,Jimmy 一時之間感到頗為尷尬,不知道如何回應。好在這個時候,開發部另外一個部門的 Floris 從門口路過,Jimmy 趕緊喊住他「Floris 我到處在找你,你怎么在這兒啊」說著就拉住 Floris 的手,竄進了另外一個辦公室,遠離了熱情的 Boris。

          「干啥?你倆在聊啥?」

          「Boris在跟我說敏捷開發……」

          「啥玩意兒?他跟你講敏捷開發?快拉倒吧,他們部門里面唯一敏捷的就手頭上的 Macbook。我們這邊都用瀑布模型來作為產品開發的流程,因為它是線性的,有著更簡單的結構,操作起來也簡單,很少會發生混亂。」說著,Floris 從辦公室的書架上摸出一堆文檔壓到 Jimmy 手上?!改阋臇|西都在里面,祝你好運。如果你需要任何幫助,請在公共的平臺上跟我約時間,我們可以開個小會解決一下問題~」說著 Floris 回到自己的桌子邊,開始繼續干活兒。

          瀑布模型(Waterfall Model) 是一個項目開發架構,開發過程是通過設計一系列階段順序展開的,從系統需求分析開始直到產品發布和維護,每個階段都會產生循環反饋,因此,如果有信息未被覆蓋或者發現了問題,那么最好「返回」上一個階段并進行適當的修改,項目開發進程從一個階段「流動」到下一個階段,這也是瀑布模型名稱的由來。包括軟件工程開發、企業項目開發、產品生產以及市場銷售等構造瀑布模型。

          拿著一堆資料,回到自己的工位前,整個人都要陷入到怠惰的情緒里面,癱坐在電腦椅上糾結了起來。信息太多了,不知道從何做起。在網上一搜也是成堆的內容,根本不知道從何入手。懵逼了。

          Jimmy 決定采用最終的備用方案——萬事不決問 Sarah。在 Jimmy 的工作經驗當中,老領導 Sarah 總能給他靠譜的建議和可行的方案。

          出問題的時候,先后退一步

          Sarah 辦公室的門從來都是敞開的。當 Jimmy 來找她的時候,Sarah 正在閱讀一些有意思的東西。她的辦公室里面有很多的書和綠植,漂亮的色彩讓 Sarah 的整個工作區域仿佛能夠喚起人的創造力和想象力,桌上打開的書頁散發著油墨的味道,聞起來讓人很有安全感,像家里的書房?!窰ey,Sarah,我又有問題來麻煩你啦,你有空么?」

          「我的門永遠敞開著。這次有啥問題,看看我能怎么幫到你。」Sarah 聽到聲音就知道是誰,一邊放下手頭的文檔,一邊抬頭笑著看到略顯局促的 Jimmy 。說話間,Jimmy 非常熟悉地跑到辦公桌另外一邊的椅子上癱坐下來,Sarah 笑著搖頭,拿起咖啡壺給 Jimmy 倒上一杯咖啡。

          回到自己椅子上的 Sarah 沒有看自己的電腦,而是像心理咨詢師一樣,盯著 JImmy ,進入了等他傾訴的狀態。而 Jimmy 此刻也驚訝于 Sarah 如此灑脫迅速地放下手頭的工作,并專注地幫助自己,于是也不再放飛地癱坐著,直起腰身,開始認真地陳述自己的問題:

          「實際上,你之前跟我說的設計原則,讓我獲益匪淺。我按照你告訴我的方法,找到了癥結,解決了問題。但是我現在不僅僅是要設計這個儀表盤界面,我需要開發和實現。有人說敏捷開發比較好,有人說瀑布模型很給力,這些開發方式到底有啥差別,優勢具體在哪我并沒有搞清楚。有人說我需要的是敏捷開發里面 Scrum,還有人說,它實際上是 shmum,也有人稱之為 Bshmum,結果還有朋友告訴我說 Google 的 Design Sprint 才能幫我解決問題。我感覺腦子快要炸了。所以……Sarah 你明白么,我需要幫助了。 」

          聽到 Jimmy 說到后面,Sarah 就明白了他碰到什么問題了。「Jimmy,沒事兒,我們總會在某些時候碰到問題,別人的指導總會派上用場?!?

          「我可以理解,如果在網上搜索這些相關的信息,會有太多雜亂的內容讓你感到信息過載。幸運的是,如果你理解這些東西背后的基本原理,就可以相對輕松地梳理清楚所有的內容了。」

          「早知道我應該一開始就來找 Sarah 問問。」Jimmy 不由得對自己抱怨了一句。說著,他在摸起咖啡杯旁邊的紙和筆,準備做筆記,就像上次那樣。Sarah 看穿了他的小心思,笑道:「不用記?!拐f著,喝了一口咖啡,然后繼續道:「先想想看,我們為什么會有敏捷、瀑布模型、沖刺模型,為什么要用循環工作法呢?」

          「為了?」Jimmy 下意識撓頭。

          「是的,但也不完全是這樣。總的來說,我們需要一個過程來呈現產品,因為人類的思維是沒有辦法直接掌控混亂的事物。此外,一個清晰的、可遵循可記錄的流程,能夠確保你在完成后,確保產品的整個開發過程是可交付的,細節也是可回溯的。這就是為什么,我們需要這些流程?!?

          「最首要的問題,不是選擇哪個流程,而是要了解這些流程為什么而存在,以及我們可能會碰到什么樣的問題。無論你選擇哪一個。」Sarah 看了一眼窗外,繼續說道:「你有問過公司的其他的同事,他們都遵循什么樣的流程么?」Sarah 問道。

          「問過了,絕大多數都采用的敏捷和瀑布模型?!笿immy 說到。

          承諾是關鍵

          「首先要告訴你的是,兩種方法都很棒。但是絕大多數的公司只會在兩種方法當中選擇一種。因此,當人們采用敏捷或者瀑布的時候,我們更多看到的是他們所做的設計或者開發的小沖刺。以往,我們會看到團隊會在3個月或者半年這樣的時間尺度當中,一直保持著高強度沖刺的狀態的。在旁觀者眼中,會看到一個清晰的故事,或者說整個產品逐漸設計或者開發出來的景象。如今流行的做法是將沖刺劃分為很多不同的階段,這也是為什么如今被稱為小沖刺。不過本質上,做的事情和內容并沒有改變?!?

          「另外,很多人會使用敏捷的方法來做項目,過程中會不斷的迭代修改。他們希望通過這樣的方法來獲得更好的結果。實際上,很多團隊會持續不斷地、長期地堅持這么做,幾個月甚至一年半載都沒有發布任何東西。如果你在這種情況下,會問自己,到底出了什么問題?我會告訴你,原因在于沒有清晰的承諾,以及太多的事情讓人分心。大家都不會承諾在一段時間內交付一些東西,使用各種借口不按時、按預算來完成項目?!?

          「如果這個時間只是一兩周,一個月,好吧,或者說一年,這個周期并不重要。重要的是,你不需要擁有一個清晰的過程,并且承諾提供一些東西。當然,這是很有挑戰性的。這意味著,在這個情況下,你必須作出一些選擇,來完成任務。」Sarah 總結道。

          阻礙前進的東西

          「到底使用哪種敏捷的方法,采取多少個步驟,或者使用經典的瀑布模型,借助谷歌的設計沖刺,都可以,都沒有問題。大家總會認為,采用哪種過程是關鍵,但是現實是,這個過程始終都只是達成目的一個手段而已?!?

          「真正的問題在于,人的天性是懶惰的,沒有按照承諾交付東西??偸侨滩蛔〉耐涎?,膨脹的自我,辦公室政治,愛來事兒的甲方,喜歡變卦的客戶,它們還都會像攔路虎一樣進入產品和設計的流程。無休止的辯論,不斷改變的策略,不斷膨脹來回拉鋸的會議,最后你只能呆滯地坐在辦公室當中,想想自己的生活到底出了什么問題。最后,我想說一下多年前,我自己所經歷的一個項目。」Sarah 覺得她應該從具體案例上來說說這個事兒了。

          「所以,首先你應該清楚,在一個特定的時間段內,交付一些東西出來。你要保證你的團隊不會跳票和拖延,也不會讓預算超出計劃。你將要在約束中工作。約束其實是一種隱藏的優點,也許并不是每個人都明白。你需要完全保持專注,除了你的和參評之外,不會被其他的任何東西分心。就你的情況而言,你需要專注于這個儀表盤界面的設計和實現。」Sarah 說道。

          「團隊的規模很重要。不過那是后話,后面咱們再仔細聊?!?

          「假設,你有一個三個人組成的團隊,他們共同負責開發并發布你的產品的下一個功能。具體到你的頭上,就是為你開發并實現這個重設計的儀表盤。你需要確保公司的其他人不會前來干涉他們的工作,不會來和他們討論這個項目以外的任何事情?!?

          「這一點極為重要。他們必須保持專注。減少被打擾的機率——或者說不被打擾是最好的事情,他們能夠專注而清晰的思考問題。除了手頭的任務之外,他們不會需要去做其他的任何事情,不會被其他的工作內容所分心。對于如何做手頭的工作,什么時候做,具體做什么,他們應當有足夠的控制權和自主權。最后,請記住這一點:

          團隊必須足夠小。如果太大,溝通問題一定會成為主要的障礙。每增加一個人,想讓大家信息和想法保持一致的成本,就會成倍增加。如果你擁有太多的自由,太多的資源以及大量的人員,你不僅會得到過度的設計,超出常規的工作,需要超出計劃的預算,以及一個沒有重點,不夠出彩的產品?!?

          問題總是會出現的

          「如果你像我說的一樣,后退一步來看問題,就會意識到,流程背后所存在的問題,并不是流程本身的優劣,也不關乎公司、人員、國家、文化或者其他。這是關于紀律和約束。不僅是團隊本身需要紀律,負責人要有紀律感,業務也需要有紀律約束。如同我們所知道的,團隊也好,產品也好,公司也好,它都是自上而下的,頂部的紀律、約束和眼界,決定了底部的紀律、調性和產出?!?

          「現在,你可能會問自己,如果你的項目出現了問題,會怎么辦?那么首先,對于你想要達成的目標,需要一個清晰的愿景或者想法。除非你的愿景和目標足夠清晰,否則你是沒有辦法來提供承諾的。在項目開始之前,這個愿景/目標必須有足夠清晰的定義,是否能夠達成,難度高低,是否具備可執行性,否則在過程中一定會有所偏離。在這里,給你幾個小貼士,務必要記?。?

          不要自欺欺人,你需要提前計劃好整個項目,避免出錯。很多事情都會出錯,所以你需要有目標有愿景,你需要向著目標前進,并且隨時做好解決問題、糾偏的準備。一旦你被其他的因素影響,就很容易增加開發時間、增加預算、招募更多的人手。不要相信所謂的規劃和藍圖,那什么都不是。問題是一定會出現的,出錯了,就專注于最終目標,抓緊手頭的項目,別無其他?!?

          Sarah 說道這里,Jimmy 已經開始有所思考了?!杆裕谖腋嬖V你這些事情以后,對于你你手頭的這個儀表盤的項目,你打算下一步要怎么做?」

          需要始終牢記的事情

          Jimmy 的腦中仍然在反思 Sarah 剛剛說過的話,下意識回復道:「要有遠見,目標清晰,為即將出現的錯誤與問題做好準備,組建一個足夠獨立的小團隊,和公司其他的團隊和部門隔離開來,這樣可以在不被打斷的情況下聚焦于當前的任務,最重要的是,要在承諾的日期前交付承諾的產品。但是我不知道團隊要有多小,我應該帶多少人?」Jimmy 問道。

          「如果我說我知道你要帶幾個,那么我一定是在騙你。不過,通常而言,你這種規模不算太大的產品,我建議控制在3人以內。你是這個項目的主管設計師,也是產品經理,在設計上已經沒有大的問題,你還需要兩個開發人員,一個負責前端,一個負責后端,這樣足矣?!筍arah 回答道。

          「那么我應該花費多少人在這個上面呢?」Jimmy 又問道。

          「這個是你的項目,時間應該由你來衡量。不過,你需要一開始就清楚你手頭有多少資源,你有多少時間來投入這個項目,有多少可供調用的預算,以及管理團隊的耐心達到了什么程度。而且,這個事情最關鍵的并不是時間,而是你的承諾,以及到達約定時間之后要交付的東西。這不僅是對上層的責任,對于你和你的項目而言,也是一個可供奮斗的目標和清晰的邊界。你的項目看起來并不算小,這個人員工作量之下,可能需要花費一個月的時間來進行開發。但是請記住,在一個月的時間內,你必須提交出一個可用的產品出來。從我的角度上來看,我是不允許增加預算和時間的。約束對雙方其實都是有利的?!筍arah 說道。

          「那么我還是想問最開始的那個問題,到底應該使用敏捷還是瀑布模型?」Jimmy 還是忍不住問道。

          「我不知道?!筍arah 坦言道:「你的項目應該由你來決定。對我而言,選擇哪個流程其實并不算最重要的問題,相反我剛剛說道的,流程之前的種種問題才是最重要的,關于承諾,團隊的構建和管理,這些因素產生的影響更為深遠。如果你清楚的知道最終要產出的產品,流程就僅僅只是手段了。」Sarah 笑著總結道。說話間,她伸手去拿之前沒看完的文檔。「謝謝,Sarah,」Jimmy 笑道:「你好像又救了我一次?!拐f著 Jimmy 走出了Sarah 的辦公室。

          「我的門一直都敞開著?!筍arah 低聲說道,走遠了 Jimmy 大概并沒有聽到這句低語。

          結語

          在設計和開發數字產品的時候,每個團隊的負責人可以選擇自己習慣的或者自己青睞的流程和方法。使用什么樣的方法無關緊要,在未來10年,我們可能還會碰到更多的新方法,新的策略。而唯一不變的,始終還是最基本的問題,團隊,承諾和交付。

          我注意到,有人把產品所使用的敏捷和瀑布模型這類流程稱為「項目的上帝」。但是實際上,不管哪種流程,依然會陷入無休止的扯皮會議和無意義的辯論,出現了問題之后,開始修改時間表?!肝覀儫o法按時完成功能A,因此我們無法開發模塊B,開發人員又需要參與下一個項目,因此我們資源是不夠用的,所以呢,這個項目不得不停一個月?!惯@情況很常見,也是典型的反面案例。

          我相信,產品團隊應該高度專注于當前的產品,和其他產品的需求、各種無關的事務隔離開來?!窰ey,Angela,我們的大客戶要求這個今天上線,能不能把你的項目放一邊,幫我們把這個產品弄上線?」這也是一個反面案例。拒絕。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計 、 包裝設計  圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

           



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合