<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>

          首頁

          做設計盡量避免掉的8個錯誤

          ui設計分享達人

          設計師有三大煩惱,時間不夠用,設計方案過稿不容易,開發還原爛,如果你也在這些事情中浪費太多精力,那么證明在工作過程中被你忽略掉了很多細節,有些你不在意的細節,或許就是一個坑,今天和大家分享下設計師最容易忽略的8個細節,如有改之,無則加勉。


          1.圖層混亂

          undefined


          不知道大家有沒有這種情況,你和一個設計師合作,他源文件給到你的時候,你很崩潰,想找到其中一個元素圖層根本不知道在哪里,這個時候你再專業,技術再牛, 這個小細節都會讓你口碑下滑。確實是這樣,在職場中,你的每個交付物,都是代表你的專業水平。我見過一些優秀的設計師,文件給過來的時候,圖層名稱,切圖,以及設計標注都非常清晰,適配規則都寫的很清楚,專業度顯而易見。


          我之前問過和我合作的開發,最喜歡和什么樣設計師合作,其實很多人都說過一個,就是圖層干凈,標注清晰的設計師。很多設計師抱怨開發還原不給力,但是試問下你自己,今天你交付給開發的每一個樣式,對方是否能很清晰的找到。所以,在職場上,一定要注意這個細節,不要被貼上一個專業比較馬虎的標簽。


          2.對上線效果忽略

          undefined


          很多設計師做設計以為設計源文件交付開發,這個項目就完事了,我之前也這么理解,但是在阿里后我轉變了這個觀點。要開始對落地頁面負責,意味著你做的圖,不止是效果圖好看,還要上線內容也好看。

          以電商設計來說,效果圖時候大家都選的很干凈的效果,很清爽的背景,但是上線后換上商家的圖簡直就沒法去看。


          undefined


          你心中的頁面效果圖上線后,和上圖一樣很干凈,清爽,讓人賞心悅目。


          undefined


          但其實最后上線環境是這樣的,頁面擁擠不堪,有很多廣告和牛皮癬,內容繁雜。所以今天的設計師除了我們要把頁面做好看,同時還需要思考,這個效果呈現給用戶會是什么樣的效果,對內容負責是我們每個人都需要去控制的。


          3.喜歡用漂亮照片

          undefined


          很多設計師作品集和項目喜歡用很漂亮的美女帥哥圖片,確實大家都喜歡漂亮的東西,但是有時候太過了,看著就特別的假,很容易看成飛機稿。其實用照片也是有技巧的,這個簡單和大家分享幾個小技巧:

          該放頭像時候就不要放風景

          undefined


          在頭像時候該放頭像就放頭像,不要放照片和插畫。另外圖片選擇時候,也可以選擇一些真實點圖片,比如可以用朋友微博上照片,或者微信頭像,可以挑一些好看的,那樣看著會更加自然。


          undefined


          網站里面照片都可以使用,而且都是比較真實的,你可以選擇皮膚顏色,性別等等,發設計稿中,會比我們找的明星帥哥美女要真實。

          如果這個產品是中國人別放外國人

          undefined


          如果你今天做的產品是一個面向國內的產品,那么照片就應該是中國人,就不要出現國外照片。真實很重要,當然這里有一些細節,就是照片不要太完美了這樣會產生虛假感,照片的清晰度最好足夠,別出現馬賽克。


          4.不考慮文字極端情況

           

          undefined


          一般在設計時候,特別是文字我們需要考慮兩種極端情況,文字最長的時候,文字最短的時候,如果忽略掉,你只按最佳效果設計,上線后就會出現問題,所以如果你設計文字最長,和文字最短時候,你都兼容到就不會出現太大問題。


          undefined


          在做金融產品適合,數字最大值和最小值也是容易被設計師忽略的地方,所以同樣的需要考慮最長的數字和最短的數字場景。


          如想看到更多干貨內容分享,可以添加wx:ddm7851,歡迎圍觀我票友圈~


          5.英文大小寫不分

           

          undefined


          可能很多人說,英文大小寫這個不是什么大事吧,但是還真是大事,我之前一個同事在內部講方案述職時候,就因為一個英文單詞大小寫弄錯了,就被領導說粗心,后來領導還經常拿這個事情來說,做設計粗糙,就這么一個下插曲,被貼了一個小標簽。但是職場就是這樣,你任何一個細微的瑕疵都容易被放大。



          6.顏色亂用

           

          undefined


          做平面設計時候,或者做印刷時候我們都知道要去遵循一定色彩原理,比如潘通印刷色等等,但是在做產品設計時候,很多時候會出現設計師色彩亂用的情況,這個地方紅色淺一點,那個按鈕深一點,雖然你滿足了你當前頁面的訴求,但是放到整個APP上來說,就是很亂。


          所以,這也是為什么很多團隊都會去每年花很大精力做規范,規范的目的其實就是建立一把尺子,這把尺子讓今天這個產品設計有一套規則遵守,否則就會出現百花齊放。


          undefined


          在谷歌材料設計規范中,很清晰的描述了每個顏色的運用場景和使用方式,目的就是保證所有設計的一致性和統一性。


          undefined


          谷歌材料設計,對于不同產品會給出不同的配色建議,這樣的規范會讓整體的設計更加合理。所以設計師在做方案時候,一定要去遵循團隊設計及規則。


          7.行高和尺寸比例隨意

           

          undefined


          文字行高也是被很多設計師忽略的,不知道一堆文字怎么定義行高,一般的做法是行高=文字大小*1.5倍,這是比較通用的一些做法,當然也有很多的閱讀軟件,行高可能設置更大一些。他們會用到黃金比例來設置行高。


          undefined


          很多人以為黃金比例就是1.618其實不是,除了黃金比外,其實還有白銀比例、鉑金比例、青銅比例這些都具有嚴格的比例性、藝術性、和諧性,并蘊藏著豐富的美學價值,好好利用,將會使你的作品變得更多高大上。


          拿行高來說,除了常用的1.5倍,還可以是1.618倍還有1.732倍,這些數值在很多閱讀產品中都會大量運用到這種比例。


          其實黃金比例除了可以定義這些字體行高以外,在尺寸上也可以去定義。


          undefined


          如果你設計中比例拿不準的話,也可以通過這樣的黃金比例來控制你整個設計的比例尺寸,這樣會更加科學。


          8.盲目使用設計趨勢

           

          undefined


          關注設計趨勢是好事,但是如果盲目的使用趨勢,就會讓頁面特別的亂。很多設計師頁面明明是扁平化的,上面都是用插畫營造著一個氛圍,但是看見最近C4D很火,然后就放了幾個C4D元素進去,這樣就會讓這個設計很混亂。


          undefined


          我之前天貓的導師,豆爸說過:做設計的時候可以先構思一個世界,世界要和諧就需要有它運轉的的規則..


          這個世界里面的規則會是什么呢?世界里面可能會有很多規則,字體,透視,光線,顏色,形狀 .... 可以拆解成每一個細節對應到設計中就是它整體看起來會是怎樣的光線,元素,空間感 ……是立體的,扁平的,魔幻的,安靜的……


          就像有不同風格的電影 動畫一樣,扁平的動畫,木偶動畫、黏土動畫.... 為了讓這個世界和諧,就會要減少一些沖突。如果立體的變形金剛世界里面出現了一個二維的米老鼠 肯定不和諧,如果小清新的色彩世界里面出現了大紅大綠東北大棉襖配色,也會不和諧。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷  作者:我們的設計日記

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          用 JavaScript + HTML + CSS 實現選項卡操作,點擊不同選項就顯示出不同的標題欄(并實現其他要求操作)

          前端達人

          Ⅰ、問題描述:

          1、用JavaScript + html + css 實現,選項卡操作;
          2、分析:
          A、用 html + css 實現布局(盒子的布置,空間的分配等);
          B、用 JavaScript 中的 DOM 操作,實現點擊不同選項顯示不同標題欄的功能;

          Ⅱ、實現過程如下:

          1、運行軟件VScode,親測可實現;
          2、運行代碼:

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微軟雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠標放在 a 的標簽上,其文字將顯示為:紅色; */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 對a標簽中的類名為:on 的標簽進行操作; */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充話費</a> <!-- 類為:on 的 a 標簽; --> <a href="#" >充流量</a> <a href="#" >充固話</a> <a href="#" style="border-right: 1px solid #ff4400;">充寬帶</a> <!-- style 操作目的:使得顯示的盒子最右邊有邊框; --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的:使第一個圖片在初始狀態時,能顯示出來; --> <img src="images/1.png" width="355px"/> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 該位置存放的是:圖片的地址 (即:里面加載的是圖片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通過 DOM 操作,拿到標簽為 a 的所有的元素(是個集合); var divs = document.getElementsByClassName('content');//通過 DOM 操作,拿到類為 content 的所有的元素(是個集合); for(var i=0; i<as.length; i++) { as[i].index = i; //給拿到的每個元素對象添加索引屬性; (由于通過 DOM 操作拿到的元素是對象,因此可以添加屬性值); as[i].onclick = function() { //給 as集合 綁定單擊事件; for(var j=0; j<as.length; j++) { as[j].className = ''; //將 as集合 的所有元素的類名全部取消; (此時用的思想為:排他思想;) divs[j].style.display = 'none'; //將 divs集合 的所有元素全設置成不顯示狀態; } this.className = 'on'; //僅將被單擊的元素的類名設置為:on,以便執行在 css 中的相關操作; divs[this.index].style.display = 'block'; //并將被單擊的元素的相關圖片設置為:block狀態;(即:顯示出來;) } } </script> </body> </html> 
          
          • 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

          3、結果展示:
          A、默認的顯示結果:
          在這里插入圖片描述
          B、點擊 ‘充流量’ 后的顯示結果:
          在這里插入圖片描述
          C、點擊 ‘充固話’ 后的顯示結果:
          在這里插入圖片描述

          D、點擊 ‘充寬帶’ 后的顯示結果:
          在這里插入圖片描述
          4、可能存在的問題:
          A 、如果自己也加載了圖片信息,仍然不能顯示該結果,可以直接下載我傳上去的文檔(可能解釋的更詳細),可以直接在 VScode 等其他軟件上加載運行;

          地址為:

          https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

          Ⅲ、小結:

          哪里有不對或不合適的地方,還請大佬們多多指點和交流!


          https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          關于通過v-if渲染的element-ui表單,校驗規則不生效的問題

          前端達人

          記錄關于通過v-if渲染的element-ui表單,校驗規則不生效的問題

          代碼

           <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="標題2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          原因:
          因為form-item綁定驗證事件是在mounted中進行的,規則變化后沒有進行重新綁定驗證事件,v-if渲染組件節點diff后被復用了,所以驗證也就自然失效了

          參考回答:v-if案例解析(element-ui form-item 結合 v-if 動態生成rule規則\表單元素,表單無法驗證問題剖析 )
          感興趣的小伙伴可以學習一下

          解決方案:

          1. 給每一個el-form-item添加一個key屬性區分
           <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item key="1" label="標題2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          如果v-if渲染的目標是整個表單,則在form標簽寫入key

          1. 直接在el-form-item中寫rules
           <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="標題2" prop="requestData" :rules="{ required: true, message: 'xxx不能為空', trigger: 'blur' }"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12

          :rules="{ required: true, message: ‘xxx不能為空’, trigger: ‘blur’ }"

          這里需要注意JavaScript中的單引號''與雙引號""的使用規范


          還有很多方法可以解決這個問題,這里只記錄我用過的其中兩個方法。有其他解決方法的同學歡迎留言討論!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          設計體系的響應式設計

          資深UI設計者

          隨著產品生態的多端化進程,越來越多的跨設備和不同屏幕尺寸導致的問題也逐漸暴露,例如:

          XX 能力要在手機上使用,不得不單獨為移動端開發幾個頁面甚至一個產品(反之亦然);產品數據量很大,Ant Design 默認字體 / 間距太大了,不夠緊湊;版式不夠優化,造成空間浪費;

          Ant Design 基于如何在小屏幕中解決信息展示問題這樣的出發點也在很多組件中提供了響應式設計,但擁有更加完備的環境適應性應該是一個設計體系長期的目標之一,因此在全局性地考慮跨端、跨多屏幕尺寸、信息密度等響應式設計方面還值得我們繼續深入研究。

          本篇文章橫向調研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業級產品設計體系的響應式設計部分,從設計策略、設計模式、實施模式、設計方案四個層面大致歸納了一些信息,旨在對響應式設計有一個籠統的了解。

          關于 Adaptive Design 與 Responsive Design先厘清兩個概念,關于響應式設計通常會有兩個普遍認識,即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念,它們的核心區別在于 AWD 針對不同的設備或屏幕尺寸定制化設計多個固定布局的尺寸,而 RWD 是同一套代碼做彈性的適應,本質上它們都在解決產品設計如何適應于不同設備以及不同屏幕規格的問題,本篇所指的「響應式設計」 概念包含了兩者,不做明顯區分,關于 Adaptive 與 Responsive 設計怎么界定以及具體的規則本篇也不進行展開。


          移動優先設計策略

          提響應式設計不得不提「移動優先」設計策略,移動優先的概念最早是 Google 在 2010 年世界移動大會上提出來的一種產品策略,基于 Google 對未來趨勢中移動設備將會逐漸擁有核心地位的判斷。后來「移動優先」更多被提及是作為一種在響應式設計中應用的設計策略,它認為在響應式設計中優先為屏幕限制更大的移動設備設計,再擴展到大屏幕的 PC 端是一種更有效的設計方法。

          例如 Alta、Lightning、Fiori 均在設計體系中明確采用「移動優先」的設計方法,Fiori 尤其指出「移動優先」專注核心功能,專注增強而非降級,提前考慮移動端更多的獨特特性以及異常情況,能提供更好的體驗。Material Design 可能算是移動優先的最佳實踐,它本身就誕生于 Android 平臺,而后再通過大量響應式規則擴展到桌面及 Web 端,使得 Material 在多端都擁有一致貫穿的良好體驗。

          (Material Design 的響應式設計)


          「移動優先」本質上是基于一種「增強」的設計思想,一個產品如果要同時適應于不同的設備,一直以來有兩種策略:優雅降級 vs. 漸進增強,后者認為先從最小和最受限制的低級設備(移動設備)入手,再為更高級的設備(桌面設備)增強信息和交互,這意味著在更多限制下,迫使設計考慮如何減少、匯總,分組信息,有利于聚焦核心信息以及為更多限制考慮。

          然而移動設備已不再是「低級設備」,Fiori 盡管強調「專注增強而非降級」,但它同時提出的「提前考慮移動端更多的獨特特性」卻與漸進增強的設計思想相悖,讓「移動優先」淪為了某種形式化的概念而難以執行。

          例如下面這個報告界面的場景里,移動端僅展示匯總的報告圖表信息,但匯總圖表并沒有「擴展」到 Tablet 里而是用明細數據替換圖表,而在桌面端同時包含了明細數據與圖表兩部分信息,這看上去并不像是一個「增強」的設計思路,更像是在全量需求下基于設備限制所采用的「降級」策略。

          (Fiori 報告界面的 Adaptive Design)


          因此「移動優先」并不一定是形式上優先設計移動端,它被廣泛接受和應用的是背后的漸進增強的核心思想。我認為在移動設備高度發展的當下,「移動優先」不再適合作為單獨概念提出來,而漸進增強的設計思想應該體現在更細分的場景中,例如在布局、信息排版以及交互反饋中,我們應該優先考慮限制更大的移動端;在一些交互方式上,優先考慮限制更大的鼠標操作。甚至在復雜業務場景里,優先滿足核心業務流程順暢也屬于漸進增強的策略范疇。


          設計模式

          這里講的設計模式是指設計師在具體業務中針對不同的情況可以采用的通用性設計方案,這些設計模式除了單獨應用外,有時候也可以多種模式結合應用。Fluent 歸納了 6 種對應不同情況的響應式設計模式,非常全面地涵蓋了其它設計體系中的絕大部分方案,分別是:調整大小、重新定位、重新排列、顯示/隱藏、替換、重新構建。

          Resize – 調整大小

          調整大小是最基礎的設計模式,是一個容器默認的響應式模式,通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規格縮放三種形式,即便在無響應式設計的體系里,容器跟隨屏幕尺寸而變化也是一個常見的應用方式。

          (Resize)


          Reposition – 重新定位

          改變 UI 元素的相對位置,以充分利用不同尺寸的空間。重新定位在響應式應用里多見在框架上,或是在組件里對一些特定元素的處理,例如 Material 的全局浮動按鈕與浮動的下拉菜單以 Reposition 的形式分別在桌面端與移動端處于不同的位置。


          (Reposition)


          Reflow – 重新排列

          改變 UI 元素的排列方式,這在內容彈性布局里較常見,通常是基于某種排列規則自動向下折行,并結合調整大小與柵格系統應用在響應式布局方面,例如 Carbon 的 Fluid Grid。



          (Reflow)

          Show / Hide – 顯示 / 隱藏

          基于屏幕空間、設備不同特性、特定情況等顯示或隱藏 UI 元素,例如大多數設計體系的框架設計應用在小屏幕上會隱藏側邊菜單。Material 在組件響應式行為里提到的 Expand 也屬于 Show / Hide 的延伸。



          (Show / Hide)

          Replace – 替換

          針對不同尺寸的屏幕采用不同形態的組件,通常應用在對具體的組件做針對性響應式設計中,但需要注意用戶面對變化時的認知成本。



          (Replace)

          Re-architect – 重新構建

          折疊或拆分信息架構,這種模式在 Web 端較難實現,通常出現在一些 Native App 的場景。



          (Re-architect)

          Density – 內容密度

          除了上述 6 種模式以外,我把內容密度也歸納為一種設計模式,Fiori、Material Design、 以及 Atlassian 都提出了內容密度的概念。Fiori 基于移動優先在移動端采用默認密度,而針對大屏幕的 Web 端則提供緊湊密度的方案,他們認為移動端手指交互所需的空間要求更高;Material 則是針對很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現。通過被動響應式或主動控制內容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。

          (Material Design 的內容密度示例)


          值得一提的是 Atlassian 通過柵格系統的間距來控制密度而非對內容密度本身進行設計,越緊湊的布局柵格間距越小,這看上去很合理,卻很容易造成內容密度增加的同時整體信息獲取效率反而降低的問題。Material 也有關于柵格空間的定義,但在內容密度的處理上和 Atlassian 恰恰相反,它認為高密度內容適用更寬松的柵格空間,相對是一個更合理的設計。在信息密度的問題上,我們的核心目的其實是提升信息效率而非單純提高視覺密度,因此解法上需要更完善的考慮。

          (Atlassian 與 Material 的柵格密度對比)


          實施模式

          實施模式是指設計體系為實現具體設計方案而定義的一系列基礎規則、解決方案或技術手段,經過整理總結為相對尺寸單位、屏幕斷點、彈性布局、柵格系統 4 個方面。

          Rem – 相對尺寸單位

          幾乎所有應用于 Web 的設計體系的技術方案中都采用 rem 相對單位,Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認的 root 尺寸,即 1rem = 16px,Alta 默認采用是 14px 的規格,并允許基于不同應用選擇 12px 或 16px 的規格,默認情況 Alta 采用更小規格的單位會在小屏幕電腦上有更好的表現,這也許和他們的產品特性相關。

          相對尺寸單位是非常具有實施價值的,它使產品能在保持信息節奏的情況下根據不同的情況等比例縮放內容,這使得設計能更方便地調整內容密度,或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題,且幾乎沒有前端成本。

          國內的前端業界包括我們自己的前端同學更多將 Rem 運用在移動端,主要為了兩個目的:方便計算尺寸、在不同寬度的設備上等比縮放內容,這樣的用法是出于前端工程師解決屏幕兼容性的一種技術手段,在使用上本身也存在一定爭議,而在響應式設計領域我們還沒有發揮出 Rem 應該發揮的作用,甚至很多設計師還并不了解相對尺寸單位的使用方法,廣泛應用 Rem 能為我們帶來哪些實際價值是接下來需要繼續研究的。

          Breakpoints – 屏幕斷點

          屏幕斷點是響應式設計的基礎依據,它決定了我們要適配到什么樣的設備或屏幕規格,并通過 Media Queries 這樣的技術實現不同 Breakpoint 條件下的不同 UI 表現。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設計的,包括考慮了移動設備的橫評豎屏情況,關于詳細的規格設置其實并沒有太大參考價值,設計體系都是根據自身定位以及設備覆蓋的情況來制訂的,例如 Material 的斷點在低分辨率范圍分得非常細,是因為 Material 主要服務的 Android 平臺有著數量繁多的設備分辨率。在滿足自己需求的前提下,屏幕端點不需要太多,無論怎樣基于數據驅動的屏幕斷點設置將會是一個更科學的方法。


          (屏幕斷點分布)

          Fiori 的斷點設計比較有意思,在設計文檔中僅有基本的布局規則,沒有明確的 Breakpoints 規則,Fiori 對于不同的組件會設計不同的 Breakpoints,例如在 Table 這個組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規格,而在 Form 的組件中,Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞,從這點上看出 Fiori 認為不同的組件有不同的表達模式,因此應該針對性對組件進行優化。

          (Fiori 的 Table 組件適配情況)

          (Fiori 的 Form 組件適配情況)


          Flex Layout – 彈性布局

          Flex 布局是 CSS3 提供的強大布局能力,從更自然更具語義化的角度實現界面元素的自適應。應用于 Web 的設計體系基本上都在組件代碼里廣泛采用了 Flex 布局,Lightning 還將柵格與 Flex 布局結合定義了自己更完善的布局方法。在響應式設計中,Flex 布局通常結合 Breakpoints 使用,在兩個 Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺也都有類似的彈性布局能力,例如 Fluent 在 windows 采用 XAML 構建布局系統。

          無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力,響應式設計要解決布局的問題將會深度依賴這些基礎技術手段,本篇不進一步展開。

          Grid System – 柵格系統

          柵格系統是所有設計體系必備的,我們通常將頁面橫向分為 N 列,定義每一列的尺寸與間距,這為界面布局提供了一致性和成本便利。傳統的柵格系統在響應式方面的應用主要是結合 Breakpoints 與一些 Responsive Token 來實現的,通過給 UI 元素指定不同的柵格數來決定他們分別在不同屏幕下占多少列,同時一些設計體系還提供了可見性相關的 token,來控制界面元素在不同屏幕的顯示與隱藏。

          Fluent、Fiori、Lightning、Material 以及大多數設計體系都采用了 12 柵格系統,因為 12 的因數夠多,能滿足足夠多的布局細分同時又不至于太復雜,Carbon 的做法更加 geek 一些,他們的「2x grid」采用了 16 柵格系統,布局粒度更細但放棄了 3,6 這樣的因數。 Ant Design 為了滿足復雜的業務情況,采用了 24 柵格系統,24 柵格提供了更高的靈活性的同時,也大大增加了復雜度,面臨柵格系統的響應式設計 24 柵格是否適用還有待商榷。

          另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念,核心思想是在較小的屏幕上降低柵格數量,將多余的柵格自動折行彈性布局。


          (Carbon 的柵格定義)

          在屏幕尺寸變化時,柵格主要有兩種響應模式:Fluid、Fixed


          (Fluid)


          (Fixed)


          這種將柵格系統與彈性布局相結合的方式基于一些簡單的規則設置,在不需要特定響應式的場景中不再需要指定繁瑣的 token,且能滿足大部分高頻且通用的情況,在一定程度上降低了成本。


          組件應用

          除了通用的響應式規則以外,設計體系在具體組件中的響應式方案還有許多值得挖掘,能為我們的組件設計提供參考價值,本篇不再一一展開,僅提兩個典型的應用情況:

          框架

          (Carbon 的框架設計)


          框架算是一個特殊的組件,在不同的設備中界面框架的適用有非常大的差異,幾乎提到響應式的所有設計體系都給出了框架響應式方案,例如 Alta 將界面框架分為四塊,以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。

          通常情況下設計體系的框架組成按形式可以分為:

          • Header – 通常情況下常駐

          • Sidenav – 分為左側右側兩種情況,一般用于放置導航,在不同設備會有展開,收縮,隱藏三種狀態

          • Content – 內容區,通常由 Grid 控制布局

          • Footer – 如有,固定在頁面底部

          • Float – 浮動框架,用于臨時狀態,通知或彈窗等

          設計體系通過對框架的定義,以及控制不同部分基于什么樣的模式響應屏幕尺寸來實施對框架的響應式設計。


          (Material 的響應式框架)


          組件

          Fluent 或 Material 在設計文檔中更多基于基礎的網格,布局,設計模式來闡述通用性的響應式規則,因此他們的響應式設計有非常好的延續性,組件的響應式方案基本上都遵循這些規則。

          而 Fiori 以及 Lightning 在通用性響應式設計模式上的定義上沒有那么全面,他們側重于在組件層面對所有組件都考慮了針對性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應式表格的組件里,在桌面端與移動端分別是 table 和 list 的模式,這個方案并不是通過全局抽象規則得出來的,而是基于對組件的針對性設計,正如他們為不同的組件設計了不同的 Breakpoints,這種針對性也適用于特定的 UI 解決方案。

          (Fiori 針對 Table 的響應式設計)

          在一定程度上抽象規則的同時,如果我們能夠為每一個組件都考慮到不同場景的響應式,當然就會提供更精細化的體驗。在一個完備的設計體系里,在設計每一個組件資產時都以漸進增強的設計策略,考慮到不同的設備及屏幕適配是非常有必要的。

          響應式設計的世界煙波浩渺,書不盡言,言不盡意。Ant Design 目前計劃從布局基礎規則以及內容密度的解決方案切入,逐步完善響應式設計的體系,這是一個重要且漫長的過程,至于文中挖下的坑還需要深入研究逐一補充,本篇初探先到這里,歡迎大家留言指出問題也很希望大家能留下想法共同探討。





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷  作者:Ant_Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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





          設計師如何在設計中講好故事?

          資深UI設計者

          講故事也是一種設計能力。

          更多設計文章,設計交流,歡迎加入粉絲群 | 微信ddm7851

          關注#公眾號:SKY蓋哥 ,第一時間獲得設計干貨和分享內容。

          講故事也是一種設計能力

          undefined


          作為設計師,經常需要和產品,技術,老板去溝通設計方案,每次都是向外發出聲音表現你的的機會,很可惜,大多數設計師在表達時,對方還無法理解你的意思,更難理解你的設計概念和設計思路,很多設計師也因此害怕去說,其實設計師學會講故事非常重要,也是專業能力的一種。今天這篇文章,希望可以幫助到你。


          undefined


          能把設計說成故事是一門藝術,作為設計師,我們必須借助講故事的方式,將產品功能推導到用戶價值層面,在大公司里面,設計師講故事是一個越來越重要的技能,一個好的故事能夠統一大家的建議,獲得領導的認可,是將產品價值和功能流程和用戶的情感聯系在一起的關鍵!


          看看別人怎么講故事


          韓國的設計,韓國很多潮流的娛樂視頻都是圍繞一個故事開始的,故事靈感也來源于大多數人生活,容易讓觀眾引起共鳴。


          undefined

           


          這個MV是來自Zion.T的Eat,講述了一個人在失落沮喪的時候,要照顧好自己,整個故事圍繞著我們生活中各種失落,孤單的情節,再配合美妙的旋律,讓觀眾感同深受。
          undefined
          K.will的Day也是運用電影短片講述一個故事,講述了一個單相思男生的故事,雖然故事很淺,但是每個故事的每一步都是來源于我們每個人生活當中的。


          undefined


          在Airbnb宣傳頁面,運用故事講述了一家3口,為了女兒的生日,一同飛往洛杉磯,他們去了迪士尼樂園,在洛杉磯預訂了房源,受到了房東的歡迎!這樣宣傳比廣告更加真實打動人。
          故事驅動的設計很容易入手,從情節提要開始,回歸用戶視角給出用戶想要的體驗。


          undefined


          allthatisshe一個英文網站,這個網站最初是在博主休產假期間創辦的,它原本是一個很簡單的時尚博客,但是博主異想天開的自我表達方案,以家庭小孩為主題的家庭故事,吸引了全世界的關注,在ins上關注度極高。


          undefined

           


          整個網站每篇文章都在描述博主和小朋友的生活故事,他們一家人相處的很多細節,這中間再推薦一些好用的商品,去旅行帶著觀眾一起看風景等!整個網站的故事一般都是從生活細節出發,比如上班的路上,在品嘗美食,聽著喜歡的音樂時候,然后結合巧妙的內容,吸引用戶。


          講好故事的5個步驟

           


          那么,作為設計師,平時在述職,總結時候如何去講故事呢?怎么去把一個合理的項目,通過敘事的方式,讓它能和聽眾引起共鳴呢?


          undefined



          今天分享給你,一個講故事的框架,一共有5步:

          1.開始(背景)


          2.沖突(問題)


          3.情節(解決問題的過程)


          4.高潮(設計策略)


          5.行動和結果(問題如何解決的,解決過程中發生了什么)

          我們來拆解下這個思路。


          更多設計文章,設計交流,歡迎加入粉絲群 | 微信ddm7851

          關注#公眾號:SKY蓋哥 ,第一時間獲得設計干貨和分享內容。


          1.開始(背景)


          這個項目是如何開始的,它的整個商業背景是什么,要解決用戶的什么問題!在我們演講或分享時候,盡量在140字以內描述清楚,整個項目的背景和簡介,讓聽眾記住你。


          undefined


          喬布斯著名的演講家,他分享有個小技巧,就是可以先拋出問題和困惑!一次iPad2發布會時候,喬布斯一上臺就拋出幾個問題,大家對于iPad銷量很擔心,iPad被各種抄襲,蘋果怎么辦?在一開始就通過問題,吸引聽眾,然后引人入勝!


          undefined



          來看一個實際案例,來自Facebook相冊一個設計改版,在項目開始,設計師就介紹了整個項目背景,Facebook Photos是讓用戶更方便的分享他們的故事,分享他們的圖片,讓用戶生活豐富多彩!那么如何幫助用戶更加便捷,更快的分享照片,是這個項目的設計重點。


          2.沖突(問題)


          講一個好的故事很難,一定要有沖突和問題,就像看一部電影,一定要有反派存在,只有沖突明顯,觀眾才會覺得更有趣。那這個環節就需要我們把這次產品改版,最重要幾個問題給提煉出來。


          undefined


          以Facebook為例,Facebook相冊遇見的問題是,通過數據研究發現,人們不愿意在Facebook中分享照片有以下幾個原因:


          1.大家手機中的照片很多,不是為了分享而拍攝的!


          2.選擇照片很難,比如自拍,一次拍了十幾張,選出一個最好的很費時間


          3.大家經常忘記了分享

          所以,在這個環節,我們需要從生活場景去思考,用淺顯易懂的語言去講述當前產品遇見的問題!


          3.情節(解決問題的過程)


          針對這些問題,設計師怎么去解決呢,在這個環節,一定要充分把你整個設計過程的思考,詳細描述,比如設計師常用的情緒版,競品分析,設計的形色字構質的思考都可以在這個環節表達清楚。


          undefined


          Facebook團隊,基于用戶研究數據,和數據結果,決定先定出一些設計原則,通過設計原則和主張來解決之前發現的問題和沖突!于是這個過程和產品開發一起討論出來,設計的原則和目標:


          1.幫助人們記住他們可以分享的故事


          2.輕松快速的分享


          3.設計一種新的布局方式,讓大家分享時候自豪,能夠吸引人!


          undefined


          然后展示了他們做的競品分析,情緒板,以及一些設計探索的方向!比如做了十幾個原型圖,對于相冊的展示設計了很多概念方案,包括各個文件類型的展示方案(照片,文字,視頻,地圖)等等!


          4.高潮(設計決策)


          基于以上設計過程,就可以得出對應的設計決策,再進行詳細的方案設計展示。


          undefined


          重新設計了頁面框架,用戶的相冊框架圖來幫用戶更好的分類相冊,同時在布局上對各種文件類型進行分類,優化相冊的瀏覽效率。


          undefined


          視覺設計時候,去掉不需要的設計元素,突出內容,確保每一步都能是一個最佳的解決方案!


          undefined


          同時在視覺設計上進行了很多創新探索,將相冊故事以膠片的形式呈現在頂部,讓用戶更愿意去分享。


          undefined


          在設計時,考慮多端的統一性,針對不同端的展示效果,真正的保證設計的落地性!


          Facebook這個設計環節就像我們電影的中間高潮部分,怎么去解決沖突的,如何定決策,并逐步去落地整個設計方案的!我們在工作中也需要在這個環節很好闡述你根據設計策略,在設計上怎么去落地的,設計方案是什么樣的,最后上線是如何的。


          5.行動和結果


          undefined


          這個環節需要把你故事中遇見的問題拋出來,以及這些問題你是怎么去溝通解決的。

          比如Facebook相冊問題,就遇見了新版本排期問題,無法一下子改完,那么設計師針對這個問題,設計了中間迭代的方案,一步一步迭代到最終,以及開發測試問題,擔心用戶情緒反彈比較大,分批次上線等等。


          同時,做這個項目你得到了哪些啟發和教訓,后續如何去避免等,最后的結果和上線后數據可以幫助我們驗證設計的正確與否。這些設計過程中的細節問題和決策,是幫助我們豐富故事很重要的因素。


          undefined


          掌握好了這個框架,生活中很多事情都可以運用這個框架去講,比如你要去和別人分享【設計師如何做簡歷】就可以按照這個框架去講:


          1.開始(故事背景和簡介)


          很多設計師找工作比較難,作品集發出去無人問津,原因是什么?是找工作人太多,還是大環境不好,那么如何提升作品集呢,怎么才能更快的讓你作品集脫穎而出。


          2.沖突(問題)


          通過查閱了幾百份設計作品集,發現一些問題,比如:版式同質化,設計風格單一,文字太多,飛機稿太多,這些是影響作品集質量很大的問題,由于這些問題導致很多面試官看作品集時候看見類似基本都跳過了,所以才導致大家找工作難。


          3.情節(解決問題的過程)


          通過查看大公司的招聘信息,提取重要關鍵信息,比如設計趨勢,數據研究,系統思考這些關鍵詞出現的比較多,同時查看了全球頂級設計師和韓國設計師作品集,發現好的作品集都是簡約的,排版舒服的,那針對這些,你決定從這幾個問題去優化作品集:


          版式上往蘋果簡約風格去靠。設計風格上貼近主流,優化作品使得作品手法豐富,同時針對飛機稿太多,優化線上案例,重新按照最新手法來做等。


          4.高潮(設計策略)


          花了一個月時間,去詳細設計你的作品集,同時設計完成后對比之前作品發現明顯的提升,同時設計的過程也掌握了一些設計趨勢,再投遞的時候發現獲得面試的機會大于之前。


          5.行動和結果


          最后獲得了一個大廠的offer,但是整個過程中是艱苦的,做作品集中間也遇見很多問題,比如沒有人指導,不知道最新的趨勢是什么,比較焦慮,針對這些現狀當時自己是如何調整的。


          運用這個框架簡單的一個敘事,你會發現這樣的體系化思考能讓我們表達時候更上一層樓。


          運用XYZ公式講故事

           

          undefined


          當我們向別人介紹一個新產品時,無法切中要點,明確表達產品用戶和概念,很多人會覺得「他們怎么聽不懂,一定是他們理解有問題,不是我的問題」很不幸的是,問題就是在于我們的表達上,分享一個XYZ公式給大家。


          undefined


          分享給大家一個公式,掌握后,你就能輕松的給別人講清楚:


          X:產品功能


          Y:使用產品的目標用戶


          Z:這個產品賦予用戶的感受


          這三個問題,與產品,開發的人都有關系,無論任何項目進展,團隊都能想起這個產品愿景,從而讓我們對產品輪廓更加清晰,同時這個公式的表達能讓團隊外的人聽的懂。


          舉個例子


          undefined


          X:微信一款通訊工具,支持單人、多人參與,通過手機網絡發送語音、圖片、視頻和文字;


          Y:它的目標用戶是使用手機的用戶;


          Z:這個產品希望鏈接用戶生活方方面面,是一種新的生活方式。


          undefined


          X:支付寶一款支付工具,它融合了支付,生活服務,保險,理財公益的生活服務平臺 ;


          Y:它的目標用戶是互聯網用戶;


          Z:這個產品希望給人親近、安全、可靠的感覺。


          上述這個XYZ框架,能夠很好幫助你表達一個產品功能和定位,希望在你下次晉升或者述職向別人介紹時,能夠用上。


          最后

           

          undefined


          回顧下今天所分享的知識點,如何很好的將你項目講成故事的5個步驟:


          1.開始(背景)


          2.沖突(問題)


          3.情節(解決問題的過程)


          4.高潮(設計策略)


          5.行動和結果(問題如何解決的,解決過程中發生了什么)


          如何向別人準確表達產品功能和愿景,XYZ公式:


          X:產品功能


          Y:使用產品的目標用戶


          Z:這個產品賦予用戶的感受。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷  作者:我們的設計日記

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何為券商類產品設計流暢、高效的自選股功能?

          資深UI設計者

          導語:“自選”作為金融類產品的基礎功能,迭代至今已經非常成熟了。放眼望去,市面上主流金融產品的自選功能似乎都大同小異,但是體驗下來會發現,細分領域下的設計側重點卻有所不同。


          一、把握需求

          如果我們將“自選”轉化為熟悉的C端功能,它類似于“收藏夾”、“關注列表”的概念,是用戶管理交易對象的重要陣地。除了常見的管理對象(交易概念中稱作“標的”)、管理分組外,“自選”還會存在對數據和使用習慣的管理需求。

          • 站在業務視角:券商的核心優勢在于“交易”,所以業務目標自然為“交易”服務。“自選”相當于一張快捷交易導航,我們提供的諸多功能都是在幫助用戶快速、便捷的調整這張表,直到它達到“為我所用”的程度。
          • 站在用戶視角:不同交易習慣的用戶,對自選的操作頻率有高有低,在保證效率的同時,還需要讓每一類用戶都能用的順手。

          二、競品調研

          1. A梯隊:美港股券商,富途、長橋

          • 共同的設計側重點:功能的組織符合用戶心理模型,任務專一,功能精煉,不追求全面、追求使用效率。
          • 共同的弊端:“管理分組”的交互設計不夠流暢。

          富途“管理分組”采用的交互方案,初期學習成本是很高的,它雖然充分考慮了效率問題,卻低估了用戶理解上的困難。(截止本文發布前,富途最新版對現方案做了視覺樣式上的更新,看來設計師也意識到了該方案目前存在著一些不夠清晰的地方,期待后續交互上的迭代。)

          長橋將分組的“新建、排序、刪除、重命名”拆的很散,理解上不困難,操作起來較為繁瑣。

          2. B梯隊:平臺類產品,騰訊自選、東方財富

          • 共同的設計側重點:相關功能盡可能的聚合在一起
          • 共同的弊端:當用戶目前僅想完成一項任務時,產品每次都會同時提供多項任務,操作通常很難專注。用戶不可避免的會多花些時間和好奇,來理解與本次操作任務無關的信息

          3. C梯隊:社區類產品,雪球

          設計側重點:管理標的、分組與數據、使用習慣的設置完全分開

          一些細節問題:比如“管理本頁股票”,在批量操作的場景下,底部欄卻存在不能批量操作的選項

          小結:對三類產品的競品調研也驗證了我們最初對需求目標的把握,為券商類產品設計“自選功能”,效率和流暢度是最關鍵的。設計目標明確了,接下來我們看看目前都存在哪些問題,以及對應的解法。

          三、問題與解法

          1. 當用戶精準搜索一個標的,并將其添加至自選后,并不能在當前完成該標的的分組

          如圖所示,現在如果想完成上述任務,需要4步、且每次僅能將標的添加至1個組。優化后我們可以通過3步完成,且每次可以將標的同時添加至多個組。

          (注:Snackbar雖然源于安卓原生的MD設計系統,在IOS并無此原生控件。但是隨著二者在設計上日漸趨同,且控件的應用上也早已互通有無,所以Snackbar在IOS的使用,合理即可,不必糾結于平臺差異。)

          交互關鍵點:

          • 想提升操作效率,不僅局限于步數、路徑的縮短,它還可能是場景的正確連結、重復操作的合并;
          • 使用Snackbar,本質上是給用戶選擇的余地。在操作a完成后的2-3秒決定是繼續進行操作b,還是離開當前場景。

          2. A功能和B功能在自選場景分別有兩條觸達路徑,不過多路徑的存在不但沒有提升功能的使用體驗,反而帶來了不小的認知負擔

          關于“冗余路徑”應該保留還是去除,一直以來都存在爭議。討論這個爭議的前提是:冗余路徑雖然不是最優路徑,但是滿足了特定場景下用戶的特定操作習慣。

          當“冗余”只是冗余、沒有任何增益時,也要敢于做減法;因為同時還需要考慮一點:出發前的選擇越多,用戶的決策時間越長。

          交互關鍵點:

          在業務方提出為同一個功能再添加一條新的路徑時,我們必須要弄清楚,這條新路徑是為解決什么問題存在的。不解決問題的需求,大部分是對產品的無效堆砌。做好產品的“守門員”,給出專業的判斷,是交互設計師的重要職責之一。

          3. 關于“自選”的設置功能,這里會討論到幾個典型的“欲速則不達”的交互問題

          1)對功能的整理和歸類,是我們為用戶留下的使用線索。如果推理時間過長,說明線索的指向性出了問題。

          • 問題:將“管理分組”歸至“設置”,分類不清晰;“數據項”Tab中的設置項沒有根據相關性進行分組;
          • 解法:在“設置”中去掉“分組” ;數據設置項根據相關性進行分組 (指標→顯示→排序)。

          2)如果層級 1 包含層級 1.x,那么層級 1.x 的操作不應放置在層級 1 的認知區域。

          • 問題:數據項Tab的“默認數據”放在頂部導航欄,功能層級不匹配;
          • 解法:功能層級調整至匹配。

          3)如果用戶設置了一些項目,無法在預期場景看到對應的效果,應提前給與說明。

          • 問題:完成數據項設置后,無法在豎屏看到全部生成效果;
          • 解法:在數據項設置頁頂部進行生成效果的說明提示。

          交互關鍵點:

          注重“效率”是沒錯的,比如上述case中看似有“效率”的Tab結構。但是這里面隱藏著更多的“清晰”問題。如果一個功能設計的讓用戶用不明白,也就談不上“效率”的提升。

          4. 最后一個case我們看下互聯網產品中最常被忽視的細節-文案

          場景1:批量管理標的。

          文案問題:按鈕表意都是“刪除”,帶來的實際結果是不同的,存在歧義。

          場景2:數據項設置。

          文案問題:沒有進行規范化處理,增加了選項的理解難度。

          交互關鍵點:

          很多時候,一套語義清晰、邏輯順滑的文案,可以等價于某個功能優化的迭代周期。實際功能點不變,只是替換文案,就能讓用戶用的清爽明白。這樣的“好買賣”,卻一直被嚴重低估。

          四、總結思考

          遇到同質化較高的需求重構時,初期應扔掉“套路”思維,從用戶視角、業務視角推導出主要設計思路。帶著問題去分析競品,推敲競品在此類需求設計上的精細差異。不要對行業top給出的方案習慣性盲從,要經過思考和反復論證,推導出最適合自己所負責產品的交互方案。

          當設計深入到細節,出現了可A可B的選擇時,回頭看看我們經過深思熟慮推導出來的設計目標。重新評估A/B方案是否符合目標、是否有助益于實現目標。沒有太多“怎么設計都可以”的方案,從我們的選擇中,也透露了決策的傾向。只是我們需要時刻確認這種“傾向”在整體邏輯中是自洽的。

          每一份交互輸出都應該是有觀點的輸出,即使最終我們的觀點被業務方、協作方的諸多因素所淹沒,仍要保持、增進自己提出觀點的能力。那些常被用戶生動提起的、打造出特色和性格的產品,都是由一個個鮮明觀點鑄造而成的。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:人人都是產品經理  作者:cony的小書包

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何建立一套設計系統

          資深UI設計者

          一、項目背景

          1. 業務背景

          • 3名設計師協同負責APP的設計工作,設計側介入時間晚,周期短,由于是v1.0版本,沒有可以復用的設計組件,從0-1探索設計風格,定義視覺語言。

          • 前期每天依賴釘釘傳輸本地設計文件,設計語言不統一,效率低。協作工具不是很理想,后期待優化。


          2. 設計背景

          • 當我們開始設計系統的制定時,大部分設計師可能都會先去網上找到大廠現成的設計系統,當拿到他們的成品的時候,會把自己的產品進行拆解和借鑒,這的確能快速解決問題,但是如果不理解其中的組織規則和邏輯,只是借鑒他們現成的設計系統,只能了解個大概,知其然而不知其所以然。

          • 直接復用其他產品的現有組件庫并不能完美套用在自己的產品上,不能形成自己的產品調性,甚至有些組件不符合自身產品的使用場景。



          二、設計規范的價值

          1. 設計層面

          • 隨著項目開始成熟,設計也需要一套統一的標準,提升設計質量以及設計的一致性。有了規范及標準,輸出才能趨向于穩定,迭代才能有序的進行。

          • 沉淀設計資產,使得設計更加持續地輸出價值,減少一次性設計,使設計師不要每天局限在元素樣式設計中,而是可以站在更高的層面上來思考業務與體驗。


          2. 開發、測試層面

          • 與設計規范同步形成研發資產,避免重復造輪子,保證代碼質量,降低維護和拓展的成本。

          • 測試避免重復的無意義走查。


          3. 產品體驗層面

          • 統一產品體驗,映射品牌心智。

          • 規范的制定,能有序統一不同頁面層級的信息架構,視覺表達。用戶在產品終端內,各鏈路、各陣地的體驗是一致的,看到的信息元素,也會有共性的傳達。這些共性的元素,組成了品牌的內核,能夠幫助用戶建立心智。


          4. 協作層面

          • 降低不同設計師之間以及設計師與開發工程師之間的溝通成本。

          • 設計師無需再花精力思考定義新的元素樣式,既能保證統一性,同時通過復用體系,設計師也可以更高的提升效率,釋放一定執行的工作量,可以把更多的精力放在前置思考決策環節,幫助業務、用戶提升價值。



          三、設計規范的目標

          1. 設計風格一致

          不同設計師有不同的設計風格、設計手法,項目有多個設計師協作時會出現不同的設計語言,需要統一產出的設計樣式。

          用戶在使用產品時可以感受到統一的設計語言,從而降低用戶的理解成本。


          2. 提高設計效率

          通過組件庫高效協同工作


          3. 建立穩定迭代機制,完善設計流程

          版本迭代時,按照設計規范統一設計語言,有不完善之處,和項目設計師討論確定方案,補充規范文檔。



          四、如何搭建設計系統

          1. 設計原則

          對于設計系統而言,在開始的第一步首先要確定一個標準,一個指導原則,在遇到不確定的設計過程中,依靠設計原則來引導方向。   


          • 其他產品設計原則

          • 有贊:產品原則:產品定義、產品設計、產品研發、產品運營。設計原則:高效、友好、安全

          • TED:追求永恒,而不是追求潮流

          • Pinterest:清晰易懂、充滿活力、牢不可破

          • Airbnb:統一、通用、風格化的、對話式的

          • 我們的APP:扁平、親和、簡約


          2. 色彩規范

          主色

          • 采用品牌色紅色,色相根據產品調性有所調整

          • 主色色階使用擴展色生成器生成,在開源網站上根據自己的需求調整參數,創建色彩體系。  

          • 在制作組件時,將顏色添加 主色、輔助色、中性色為一級分類,例如:01_主色;再添加二級分類,例如:01_主色/red ;三級分類根據顏色飽和度,用x%命名,例如01_主色/red/100%。

          • 命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后,將每個顏色轉換成 Symbol,便可統一調用。



          輔助色

          • 我們不僅需要品牌色來傳遞品牌價值,我們還需要輔助色來組成我們產品體系的顏色搭配,實現不同功能點的視覺呈現。目前編程貓APP輔助色暫定為黑色。

          • 對于輔助色的選擇,可以選取了同類色、互補色、對比色三種輔助色系。


          • 同類色:

          • 色環上相差15-30度的色彩,非常舒適,色彩過渡自然,溫和,給予用戶安心,信任的心理預期。并且于品牌色的色相冷暖性質一致,和諧統一。(將品牌色設置為最中間的點,就可以得到兩個輔助色)如下圖



          • 互補色:

          • 指在色相環上角度為180°的色彩,比如我們最常說到的3組互補色:紅和綠、藍和橙、黃和紫。如下圖:



          • 對比色:

          • 沒有互補色那么嚴格,指的是在色相環上角度在120° - 180°之間的色彩,并且理論上來說,互補色應該也是包含于對比色之內的。比如:粉色和綠色就是對比色。如下圖:



          • 校正輔助色

          • 校正的原則一:色相差值不能超過15近似色的選取,保證色相不超過15,保持統一的視覺體驗。

          • 校正的原則二:盡量保持感官明度一致

          中性色

          • 中性色作為輔助色,也是調和顏色視覺的一種。它本身不帶情感色彩,可中和其他任何顏色,自然界中沒有純黑或者純白的顏色,所以將純黑色降了純度,使之符合感覺舒適程度。中性色也常用于字體的使用,并且以不透明度的形式落地。

          • 在中性色組件里,由于文字、背景色都屬于中性色,分別定義了三大類的二級分類,分別BG、Black、Text


          功能色

          B端產品多用,此處不過多贅述。


          3. 字體規范

          字體的命名方式為序號_標題類型/字重/對齊方式/字號的層級結構,例如「01_主文字_標題_按鈕文字_正文/加粗/Center/28px」;一級分類定義了五個大類:

          • 主要的文字:主文字、標題、按鈕問題、正文;

          • 次要文字:副標題、輔助文字、弱標簽字;

          • 禁用文字;

          • 標簽文字:文本鏈接、功能文字;

          • 特殊字體。


          4. 柵格系統

          我們都知道多數柵格里的間距都采用8/6的倍數,有了8這個基數后其他都很容易定義,但是前期我們2位設計師在設計初期頁面時,1個采用6倍柵格,1個采用了8倍柵格,導致設計稿不統一,浪費了時間修改調整

                

          那具體應該是用6還是8呢?

          • Web端常見框架Bootstrap用8為基數,響應式布局更靈活

          • 減少出現奇像素偏移造成模糊

          • 開發更容易理解的數字8

          • 能被最多的屏幕尺寸整除適配



          5. 圖標設計

          一級分類分為導航類、功能類、系統類三大類,二級分類根據場景和名稱進行細分。前期二級分類用尺寸來進行分類,但是后期討論用尺寸定義尋找某個圖標不夠便捷,如果找「返回」,設計師并不知道這個返回是多大尺寸的,尋找起來就比較費力,所以改成了按照場景分類。

           

          根據圖標形狀,按照方形、圓形、橫向、縱向輸出圖標繪制模版,便于用戶感知到統一的圖標風格,也便于設計師對圖標進行繪制和調整。


          6. 通用控件

          根據原子理論的定義和命名方式,依次完成對其他通用控件的原子、分子和組織的定義,例如:按鈕、列表、空狀態等,整個過程都是通過 Symbol 的不斷嵌套,最終實現組件庫的創建。


          Diolog 彈窗

          • 滿足基本組件需求,跟隨文案內容自動適配彈窗高度,按鈕顏色可更換,文案字符樣式可更換

          • 使用包含具體動作的動詞,即使不看上下文也可以通過按鈕判斷,而不是使用【確定】、【取消】等寬泛的詞匯。



          Default 缺省頁

          給用戶提供解決方案,而不是讓用戶自己尋找問題原因

          List 列表

          • 符合前端-盒子模型

          • 盒模型是一種描述對象尺寸和間距的方法。它由 4 個組件組成:邊框、邊距、內邊距和元素本身的尺寸。

          • 邊框:圍繞元素邊緣的描邊粗細。大多數設計工具不允許這影響整體間距和尺寸。

          • Padding:元素邊界與其子元素邊界之間的空間

          • 邊距:元素邊界與相鄰對象之間的空間


          在做每個模塊時,不僅僅只是把默認的文本/元素制作出來,它的熱區也要讓開發可以理解,按照盒子模型的原理,比如在做List,「單項輸入」文本的行高,整個單元格的高度需要用白底畫出來,明確padding值;與其他元素/設備之間的邊距(Margin)要也表示出來。



          五、維護與管理

          1. 存儲地址

          • sketch cloud云端同步

          • 云端管理會有一些較大的優勢。比如更新通知更方便、每次大家訪問,都能下載到最新的規范,維護管理起來也會省事一些。


          2. 更新同步

          規范的改動性不要過于頻繁,通常半年及1年左右的時間以上,進行一次較大迭代是比較合適的。每次更新以后,需要郵件或者其它形式,周知所有跟規范可能相關的人員。同步的信息主要有  :

          規范本次修改范圍及修改原因;

          1. 修改點羅列

          2. 優化后的版本號

          1. 最新的文件同步

          2. 推進變更計劃




            藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

            截屏2021-05-13 上午11.41.03.png


            文章來源:站酷  作者:AmberU

            分享此文一切功德,皆悉回向給文章原作者及眾讀者.
            免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          JavaScript對象、內置對象、值類型和引用類型詳解

          前端達人

          對象

          JS中的對象是屬性行為結合體,其中屬性是對象的靜態特征,行為又稱方法,是對象的動態特征。

          JavaScript中的對象主要分為三大類:

          • 內置對象
            由ES標準中定義的對象 在任何的ES的實現中都可以使用,比如Math String Number Boolean Function Object
          • 宿主對象
            由JS的運行環境提供的對象,目前來講主要是瀏覽器提供的對象,比如BOM DOM
          • 自定義對象
            由開發人員自己創建的對象

          對象的定義

          定義非空對象

           // 非空對象: var 對象名 = { 屬性名: 值, ... 方法名: function([參數]){ 方法體語句; } ... } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
           var p1 = { color: '黑色',//給對象添加屬性 weight: '188g',//屬性之間用逗號隔開 screenSize: 6.5, call: function(name){//給對象添加方法 console.log("打出電話:"+name); }, sendMassage: function(msg){ console.log("發出的信息是:"+msg); }, playVideo: function(){ console.log("播放視頻"); }, playMusic: function(){ console.log("播放音樂"); } } console.log("手機顏色:"+p1['color']);//也可以使用 對象['屬性']來輸出屬性值 console.log("手機重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("張三");//調用對象的發方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1); 
          
          • 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

          使用new Object()創建對象

           var p = new Object(); // 創建一個空對象p 
          
          • 1
           p2.name = '劉備'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//調用對象的方法 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          可以使用構造函數來創建對象:
          語法: new 構造函數名( )

           function Student(name,sex,age){ this.name = name;//這里的this指向的是構造函數新創建的對象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名:"+this.name) console.log("姓別:"+this.sex) console.log("年齡:"+this.age) } } var s1 = new Student('喬峰','男',28);//s1為構造函數創建的新對象 即實例 s1.show(); var s2 = new Student('段譽','男',23); s2.show(); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14

          注意:"構造函數"可以有參數,也可以沒有參數,如果沒有參數小括號可以省略

          遍歷對象的成員

          遍歷對象的屬性和方法:使用for…in循環

           for(var 變量名 in 對象名){ 循環語句 } 
          
          • 1
          • 2
          • 3
           function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名:"+this.name) console.log("姓別:"+this.sex) console.log("年齡:"+this.age) } } // s2是要遍歷的對象 var s2 = new Student('段譽','男',23); for(var k in s2){ console.log(k);//依次輸出 name sex age show() console.log(s2[k]);//依次輸出 段譽 男 23  } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16

          in運算符
          判斷成員(屬性)在對象中是否存在,存在返回true;不存在返回false。

          JS內置對象

          JavaScript提供了很多常用的內置對象,包括數學對象Math、日期對象Date、數組對象Array以及字符串對象String等。

          Math對象

          Math對象:用來對數字進行與數學相關的運算,不需要實例化對象,可以直接使用其靜態屬性和靜態方法.

           Math對象:不需要實例化
                      Math.PI:算數常量PI Math.abs(x):返回x的絕對值
                      Math.max(args...):返回最大數
                      Math.min(args...):返回最小數
                      Math.pow(x,y):返回x的y次方
                      Math.sqrt(x):返回x的算術平方根
                      Math.random():返回0.01.0之間的隨機數
                      Math.round(x):返回最接近x的整數
                      Math.floor(x):返回一個小于等于x 并且與它最接近的整數
                      Math.ceil(x):返回一個大于等于x 并且與它最接近的整數 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          Date對象

          Date對象:需要使用new Date()實例化對象才能使用,創建一個對象 Date()是一個構造函數,可以給該構造函數傳遞參數生成一個日期對象。
          在這里插入圖片描述
          在這里插入圖片描述

           // 1.創建一個Date對象 沒有參數 var date1 = new Date(); console.log(date1); // 2.傳入年 月 日 時 分 秒 創建一個指定日期時間的Date對象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.傳入一個日期和時間字符串創建一個Date對象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date對象距離1970年1月1日午夜之間的毫秒數 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          數組對象

          數組:是一些類型相同的數據的集合,它和普通的對象功能類似,也是用來存儲一些值,數組是使用數字來作為索引操作內部的元素。
          數組的創建

          • 使用字面量
           var arr=[]//創建一個空數組 
          
          • 1
          • 使用new Array創建
          var arr = new Array();//定義一個空數組 
          
          • 1

          判斷一個對象是不是數組的兩種方法:

          • isArray(對象名)
          • instanceof: 對象名 instanceof Array
           var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          在這里插入圖片描述
          關于數組的其他方法之前的文章要有詳細介紹,這里不多做解釋。

          String對象

          String對象:字符串對象,必須使用new String()來創建

          字符串常用方法

           - charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 連接多個字符串 - charCodeAt(n) 返回n位置上的ASCII- split('分隔符') 將字符串按給定的分隔符 轉換成字符串數組 - substr(start,length) 從start開始提取length個字符構成一個新串 - substring(from,to) 提取from和to之間的字符串構成一個新串 - toLowerCase() 將串中的大寫字符轉換成小寫 不影響原字符串 返回一個新字符串 - toUpperCase() 將串中的所有小寫轉換成大寫 不影響原字符串 返回一個新字符串 - replace(str1,str2) 使用str2替換字符串中的str1 返回替換結果 不影響原字符串 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          字符串對象練習

           // 輸入一個由字母組成的字符串,統計串中每個字母出現的次數 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26個小寫字母各自出現的次數 var upper = new Array(26);// 存放26個大寫字母各自出現的次數 // 初始化兩個數組 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
           /* 輸入一個十進制整數和一個數制(2、8、16)將該十進制整數轉換成
                  對應的數值格式輸出
                      取余法:
                         m=15 k=8
                         m%k 將余數存放在數組中
                  */ var m = parseInt(prompt('請輸入一個整數:')); var k = parseInt(prompt('請輸入一個數制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放數制轉換的結果 var i = 0; while(m!=0){//對m進行數制轉換 將余數放在arr數組里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('轉換的結果為:'+str); 
          
          • 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

          值類型和引用類型

          值類型: 簡單的數據類型(字符串,數值型,布爾型,undefined,null)
          引用類型: 復雜數據類型(對象) 變量中保存的是引用的地址

          注意: 引用類型的特點是,變量中保存的僅僅是一個引用的地址,當對變量進行賦值時,并不是將對象復制了一份,而是將兩個變量指向了同一個對象的引用。

          下面對內存中的棧和堆進行分析
          棧(stack):會自動分配內存空間,會自動釋放,簡單數據類型存放到棧里面。
          堆(heap):動態分配的內存,大小不定也不會自動釋放,復雜數據類型存放到堆里面。

          在這里插入圖片描述
          由此可見存放在堆內存中的對象,變量實際保存的是一個指針,這個指針指向另一個位置,通過這個指針來尋找堆中存儲的對象的屬性和值,并且每個空間大小不一樣,要根據情況開進行特定的分配。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          Web前端-JS基礎

          前端達人

          JS的歷史和特點簡介

          JS誕生的背景

          1.隨著互聯網的發展,頁面傳遞給后臺有太多需要驗證的東西,盡管后端的代碼是能夠實現對傳遞過來的數據進行校驗和判斷的,但是這樣的話無疑是加重了后臺程序的工作任務量,于是廣大互聯網工作人員迫切需要有一種新的辦法/語言能夠實現這樣的效果,于是js也就是在這樣的一個大的時代背景下誕生的

          2.js最開始的時候是不叫js而是叫scrpit語言,他們也想將這個前景光明的明日之星賣給微軟,但是微軟沒有買下,在種種機緣巧合之后被Sun公司收購了,為了讓其與java語言走的近點 ,更是改名為JavaScript簡稱為js

          JS的歷史

          在1995年時,由Netscape公司的Brendan Eich,在網景導航者瀏覽器上首次設計實現而成

          1997年,在ECMA(歐洲計算機制造商協會)的協調下,由Netscape、Sun、微軟、Borland組成的工作組確定統一標準:ECMA-262。

          JS的特點

          1.弱類型語言:在書寫的時候不去做明確的數據類型的限定 例如 var a=3.14 var b=“998”

          2.運行在瀏覽器端的解釋執行性語言(js—>node.js可以運行在服務器上)

          3.基于對象的編程語言

          4.跨平臺性:JavaScript是依賴于瀏覽器本身,與操作環境無關,只要能運行瀏覽器的計算機,并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。

          5.動態性:JavaScript是動態的,它可以直接對用戶或客戶輸入做出響應,無須經過Web服務程序。它對用戶的反映響應,是采用以事件驅動的方式進行的。所謂事件驅動,就是指在主頁(Home Page)中執行了某種操作所產生的動作,就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后,可能會引起相應的事件響應。

          可以簡單的理解為:只要用戶發出動作,js就會產生響應

          6.安全性:JavaScript是一種安全性語言,它不直接允許訪問本地的硬盤,并不能直接將數據存入到服務器上,不允許對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。

          小結:js現在的用途

          1)作用于瀏覽器端幫助提升用戶的體驗度

          2 ) 可以用來編寫游戲腳本

          3)可以被構建成各種組件(node.js,React.js,vue.js, Jquery)

          JS的語法基礎

          第一個JS例子

          <html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*彈出對話框*/ </script> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11

          在這里插入圖片描述

          小結:1.js在頁面內使用的時候必須要寫在<script>標簽內

          2.js代碼書寫的時候不用分號標識一行編程語句的結束

          3.在js代碼中xxx():此時表明這是一個函數

          4.alert():以彈窗的形式將括號內的內容展示出來

          JavaScript 語法

          JavaScript: 是一個腳本語言。它是一個輕量級,但功能強大的編程語言

          1.數據類型:雖然JavaScript在書寫校驗上不去區分數據的類型,但是并不意味著是不區分數據類型,而是通過在瀏覽器中內置的JS解析器/引擎自動的去判斷的

          ---------------------------------------------------------------------------------------------------------

          1.1數字:

          var a=12 //整數

          var b=2.3 //浮點數或者說是小數型

          var c=-0.5

          友情提示:1)在js中變量名必須以字母或下劃線("_")開頭

          2)變量可以包含數字、從 A 至 Z 的大小寫字母

          3)JavaScript 區分大小寫,即變量 myVar、 myVAR 和 myvar 是不同的變量

          ---------------------------------------------------------------------------------------------------------

          1.2邏輯型或布爾型:

          var a= true

          var b=false

          alert(a)

          alert(b)

          ---------------------------------------------------------------------------------------------------------

          1.3Undefined 和 null

          Undefined: 用于存放 JavaScript 的 undefined 值,表示一個未聲明的變量,或已聲明但沒有賦值的變量,或一個并不存在的對象屬性

          null:可以通過將變量的值設置為 null 來清空變量,其意思為空值

          var a=""

          var a=null

          var a

          alert(typeof(a))

          ---------------------------------------------------------------------------------------------------------

          1.4字符串: 可以使用單引號或雙引號

          var firstName=“biil”

          var familyName=‘Gates’

          alert(firstName+familyName)

          ---------------------------------------------------------------------------------------------------------

          1.5日期:

          var myDate=new Date()

          alert(myDate)/默認是格里尼形式的日期格式/

          提示:Date是js中的一個內置的類

          new:為類Date在內存中創建一個內存空間,進而實現實例化

          補充:關鍵字:就是具有特殊含義的詞

          ---------------------------------------------------------------------------------------------------------

          1.6數組:是一種存放數據的容器,其一般可以存放多個,且需要知道其長度

          var array=[40, 100, 1, 5, 25, 10]

          alert(array[0])

          ---------------------------------------------------------------------------------------------------------

          注釋:

          單行注釋://

          多行注釋:/**/

          擴展:注釋的作用:

          1)統一規范

          2)注解,幫助理解/閱讀代碼

          3)扯淡

          ---------------------------------------------------------------------------------------------------------

          連接字符和轉義字符:

          連接字符:在js中場用+表示為連接字符

          例如: var a=123

          alert(‘變量a的值為:’+a)

          轉義字符:具有特殊含義的字符

          \n 換行符 alert(“這是第一局 \n 這是第二句”)

          \t 制表符 alert(“這是第一局 \t 這是第二句”)

          ---------------------------------------------------------------------------------------------------------

          2.運算符:

          2.1算術運算符: +, -, *, /, %,++,--

          ++:自動加1 例如 var a=12

          alert(a++)

          ++在前:先計算再輸出; ++在后:先輸出再計算

          –:自動減1,例如 var h=6

          alert(a–)

          ---------------------------------------------------------------------------------------------------------

          2.2關系運算符: > ,>=, <,<=, !=, ==,===

          ---------------------------------------------------------------------------------------------------------

          2.3邏輯運算符:

          與 :&& :全真為真,只要有一個假則為假

          或 :|| :全假為假,只要有一個為真則為真

          非 :! :取相反的

          JavaScript 輸出

          JavaScript 可以通過不同的方式來輸出數據:

          1)使用 window.alert() 彈出警告框。

          <html> <body> <h1>使用 window.alert() 彈出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          在這里插入圖片描述

          2)使用 document.write() 方法將內容寫到 HTML 文檔中。

          <html> <body> <h1>我的第一個 Web 頁面</h1> <script> document.write(123); </script> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          在這里插入圖片描述

          3)使用 innerHTML 寫入到 HTML 元素。

           <html> <body> <h1>使用 innerHTML 寫入到 HTML 元素</h1> <p id="demo">我的第一個段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18

          使用innerHTML方法,將前面定位到的選擇器中的標簽內容進行更改

          在這里插入圖片描述

          4)使用 console.log() 寫入到瀏覽器的控制臺。

          <!DOCTYPE html> <html> <body> <h1>使用 console.log() 寫入到瀏覽器的控制臺</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23

          console.log()會將想要輸出的數據寫到網頁的控制臺中顯示
          在這里插入圖片描述

          基本語句

          1)順序語句:js默認是從上向下自動執行的

          2)選擇語句:

          2.1)二路分支:

          if(條件)

          {

          //JavaScript代碼;

          }

          else

          {

          //JavaScript代碼;

          }

          2.2)多路決策:

          switch (表達式)

          {

          case 常量1 :

          JavaScript語句;

          break;

          case 常量2 :

          JavaScript語句;

          break;

          default :

          JavaScript語句;

          }

          小結:switch…case…default不僅有多路決策的特性,還有穿透性

          或者:

          if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14

          3)循環語句:

          for循環語句:

          for (var i=0;i<10;i++) { alert("當前i的值為:"+i) } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          while循環語句:

          var i =1 while (i>5) { alert("當前i的值為:"+i) i++; } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          do…while循環:

          var i=5 do { alert("執行了") i++; } while (i<5); 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          備注:for:知道次數的循環

          while:>=0次的循環

          do…while:>=1次的循環

          break:語句用于跳出循環。

          continue:用于跳過循環中的一個迭代。

          JavaScript 數據類型的轉換

          1.typeof 操作符:可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。

          2.將數字轉換為字符串

           var a=123 //第一種方法,用String //var castResult=String(a)  //第二種方法,用toString方法 var castResult2=a.toString() alert(typeof(castResult2)) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          3.將字符串轉換為數字

           var a="123" //用Number轉換 var b=Number(a) //用parseInt方法將字符串強行轉換為數字 //var b=parseInt(a) alert(typeof(b)) alert(b+998) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          javaScript方法

          1.match():匹配字符串可用正則表達式

          2.search() 方法 用于檢索字符串中指定的子字符串,或檢索與正則表達式相匹配的子字符串,并返回子串的起始位置

           var str = "abcderfha"; //返回查找到的下標位置 alert(str.search("er")) //返回 4 //查查找不到的時候返回-1 alert(str.search("zy"))//返回-1 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          3.replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

          var str = "Hello World"; alert(str.replace("World","javascript"))//顯示結果為Hello javascript 
          
          • 1
          • 2

          javaScript函數

          js中的函數定義

          語法: function 函數名( ){

          }

          實例一

          <html> <head> <meta charset="UTF-8"> <title>JS函數</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          定義一個求和函數,當點擊求和按鈕的時候將計算出傳入的兩個參數的和

          ps:onclick單擊事件
          在這里插入圖片描述

          匿名函數定義

          var xx =function(x,y){

          alert(x+y)

          }(23,34);

          (function( o ){

          alert(o)

          })(“你好”)

          實例二:

          <script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          在這里插入圖片描述在這里插入圖片描述

          JS對象

          數組對象

          創建一個數組:三種方式

          1:常規方式

          <script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李寧" myCars[2]="安踏" alert(myCars[1]) </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          2:簡潔方式

          <script type="text/javascript"> var myCars=new Array("nike","李寧","安踏"); alert(myCars[1]) </script> 
          
          • 1
          • 2
          • 3
          • 4

          3:字面方式

          <script type="text/javascript"> var myCars=["nike","李寧","安踏"]; alert(myCars[1]) </script> 
          
          • 1
          • 2
          • 3
          • 4

          2:訪問數組:通過指定數組名以及索引號碼,你可以訪問某個特定的元素

          例如:var name=myCars[0];

          3:數組的方法和屬性

          數組名.length : 數組 中元素的數量

          數組名.indexOf(“abc”):“abc” 值在數組中的索引值

          4:數組的排序

          數組名.sort(); :將數組按正序排序,但是是按照字符串的排序方式來排序,不管里面是數字還是什么都是按字符串的排序方式來排序

          reverse():將一個數組中的元素的順序反轉,(即是將數組中的元素的頭變成尾,尾變成了頭,不是其他的)

          擴展:將數組先用sort()方法進行正序排序,在利用reverse()方法反轉,即可達成降序的目的

          字符串對象

          字符串中常用的屬性和方法

          str.length:獲取字符串的長度

          str.match(""):內容匹配

          str.replace():替換內容

          var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length; 
          
          • 1
          • 2
          • 3

          JS面向對象編程

          1.對象:是屬性和/方法的組合

          屬性:是對象所擁有的一組外觀特征,一般為名詞

          方法:是對象可以執行的功能,一般為動詞

          例如:對象:汽車

          屬性:型號:法拉利 顏色:綠色

          方法:前進、剎車、倒車

          PS:三類已經存在的對象:

          瀏覽器對象:BOM(已經存在于瀏覽器中的,到時候我們直接調用即可,例如Screen,History,Location,Navigator)

          js腳本對象:數組,字符串,日期,Math等(JS語言中已經寫好的具有某一些功能的對象,例如Array,Number,Math…)

          HTML文檔對象:DOM(已經存在于HTML中的,且已經寫好了,用的時候可以直接調用即可,例如Document

          例如:

          <script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轎車"; this.fun=function(){alert("100km/h");} } var car1=new Car("奧迪","藍色"); var car2=new Car("奔馳","綠色"); alert(car1.type); //轎車 car1.fun();//100km/h </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          javaScript選擇器

          1.id選擇器:通過 id 查找 HTML 元素,如果找到該元素,則該方法將以對象的形式返回該元素。

          document.getElementById("id1").value //獲取id為id1的標簽中的value值 
          
          • 1

          2.name選擇器:通過name查找到HTML的元素,如果找到元素了,則會返回一個數組

           var arr=document.getElementsByName("like") //將name為like的標簽全部存入arr數組中 
          
          • 1

          3.通過標簽名找到 HTML 元素:

          getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都與步驟2一樣 
          
          • 1
          • 2
          • 3

          javaScript彈框

          確認框

          <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕,顯示確認框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品訂單");//彈出一個確定框,確定,返回true,取消返回false if(r==true){ x="提交成功,已確定" } else{ x="提交失敗,已取消" }、 //抓取掉id為demo的標簽,在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html> 
          
          • 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

          在這里插入圖片描述

          點擊確定,會在屏幕顯示”提交成功,已確定“,點擊取消,會在屏幕顯示"提交失敗,已取消"

          對話框

          <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕,顯示輸入框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("請輸入你的名字","Hello"); //彈出對話框,可輸入名字 //判斷如果輸入的不為空或者不是空字符串,則x被賦值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的開始,加油" } //抓取掉id為demo的標簽,在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html> 
          
          • 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

          在這里插入圖片描述

          點擊確定以后則會將被賦值的x顯示在屏幕中



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          轉自:csdn
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          日歷

          鏈接

          個人資料

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

          存檔

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