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

          首頁

          這15個好習慣,可以將你塑造為優秀的UX設計師

          資深UI設計者

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

          用戶體驗設計師是一個典型的成長型的職業,不僅僅是它的發展空間如此,設計師本人同樣需要持續地學習和進步才行。誰不想變得更好呢?很多時候,成就更好的自己,來源于好習慣。


          「不斷重復的那些事情塑造了我們。卓越并非源于行為,而是來自習慣?!箒喞锸慷嗟碌脑捦瑯又v述著這個道理。在今天的文章當中,我所分享的這15個良好的習慣,塑造了許多優秀的 UX設計師,希望你也能養成好習慣,不斷成長。

          1. 為自己設定目標

          設計能力從來不是憑空擁有的,不斷的練習和持續的學習才能夠幫你成為更好的設計師。設定恰當的、可抵達的目標,本身也是一種更好學習和前進的技巧。

          你會面對無窮的機會和不同的選擇,但是你的目標應當放在首位。設定目標不要太難,但是也需要有一定的挑戰性:

          • 選擇可實現的目標;
          • 為每個目標設定一個截止日期;
          • 在日歷中創建相關的提醒;
          • 達成目標的時候獎勵自己。

          2. 練習主動傾聽

          傾聽是一種需要習得的能力。傾聽本身并不是單純的聽那么簡單,它也有分類:主動傾聽和被動傾聽。當傾聽者沒有足夠的動力和動機來傾聽傾訴者的語言的時候,信息只是被動接收,而通常無法理解和吸收。

          主動傾聽則不同,傾聽者需要完全集中注意力,能夠理解,回應,并且記住對方所說的內容。主動傾聽是溝通的先決條件。

          下面是一些練習主動傾聽的技巧:

          • 當傾訴者說話的時候,盡量聽,而不是說;
          • 不要使用問題來回答問題;
          • 不要控制對話的走向;
          • 不要打斷并替傾訴者說話;
          • 保持和傾訴者溝通他所說的內容,而不是只對你感興趣的內容回應;
          • 在傾訴者說完了之后再提問題,而不是中途打斷。

          3. 學會講故事的技巧

          溝通是設計過程中最重要的部分之一。視覺上的突出只是產品一方面的屬性,更重要的是傳達。

          故事是傳達信息最為有效的方式之一。好的設計團隊會洞悉產品背后的故事來驅動產品。講故事是優秀 UX設計師的必備技能,通過講述故事能夠更好地吸引用戶。

          下面的方法能夠幫你講述故事:

          • 讓自己沉浸在品牌故事當中。如果對于品牌故事了解不多,會錯失許多想法和機會。在產品設計開始之前,盡可能通過學習來填補這個空白。
          • 創建故事板。故事板是描繪用戶使用產品的場景,是設計師用來表達想法的重要工具。

          4. 避免使用專業術語

          溝通重要,溝通方式同樣重要。當你使用行話來表述的時候,用戶常常很難理解,這是個壞習慣。這個時候,容易產生誤解。

          和團隊中其他成員溝通的時候,同樣需要注意這個問題。絕大多數的其他成員不一定會懂得這些術語的含義,因此這些術語會產生認知負荷。盡量使用簡單的方式來表述。

          不要在產品的微文案中使用專業術語。這個也是同樣的道理。確保溝通的清晰和精準。

          可以每發現一個別人難以理解的專業術語,就放在罐子中,以示警醒。

          5. 不要滿足于特定的某個想法

          如果你腦中只有一個想法,那么很難說這個想法是對的還是錯的。在做設計項目的時候,一個想法可能是不夠的,腦洞大開,在思路上多加探索,開放地尋找不同的想法,并且在實際的設計過程中,篩選出對的、好的想法。

          6. 不要陷入完美主義

          許多設計師都是完美主義者,想花費大量的時間和精力來打造完美的產品,這往往會導致產品開發周期過長,超出 deadline 。

          請記住,完成比完美更重要。不要深陷完美主義的陷阱,拿出能夠滿足要求的產品,追求完美并不是錯過 Deadline 的借口。

          不要讓追求完美成為塑造好產品的敵人。

          7. 學會畫草圖

          高保真的原型會讓人看起來非常舒暢,但是產品始終是從零開始構建的,這也意味著你不能跳過紙筆繪畫,而直接進入原型設計。數字化的設計在很多時候會限制我們的創造力,所以,學會畫草圖很有必要。

          使用紙和筆來繪制草圖將會幫你節省大量的時間,繪制好草圖之后再切換到電腦上會便捷很多。

          在頭腦風暴階段,草圖也可以更快地抓住靈感,推動進度。

          8. 善于做筆記

          紙和筆應該隨時伴隨著你。每當你腦中閃過一個好的想法的時候,不要依靠記憶,好記性始終還是不如爛筆頭的。人類的記憶很容易出錯??焖儆涗浤愕南敕ǎ詈门渖喜輬D。

          9. 學會總結經驗

          如果你已經參與了不少 UX 項目,那么你可能會在之前的項目中有過不少經驗和想法。不要錯過時機,將這些經驗和想法總結和記錄下來,然后:

          • 將它們用來解決新問題;
          • 通過有趣的案例研究來更新你的 UX 作品集;
          • 在社區分享你的經驗(比如寫總結文章)。

          10. 參與更多的合作

          當你作為團隊成員和其他人合作項目的時候,盡量利用這個機會來協同,從各個不同的方面來協作。了解其他人正在為這個項目做什么,以及 UX設計師可以怎樣和他們協作來提升整個項目的效果。協作是 UX設計師最有力的技能之一。

          11. 參與可用性測試的環節

          了解用戶是 UX設計師的首要目標,許多 UX設計師會采用構建角色和分析數據的方法來了解用戶、進行產品交互設計。雖然這些工具確實很有用,但是沒有什么比使用真實的用戶和真實的產品來進行測試更有效的了。用戶可用性測試你觀看的越多,對于產品和用戶就越了解,也越能夠洞悉問題的所在。

          12 . 每天都要盡量汲取靈感

          設計師需要靈感,需要從不同的地方盡可能多的獲取靈感。在這里,我分享兩個技巧:

          • 在工作內容和靈感之間尋找平衡點?;ㄙM20%的精力來尋找靈感,在具體的工作內容上花費80%的時間來進行打磨。
          • 不要局限于UI/UX領域的內容。多參加創意活動,去不同的地方,拍照,聽音樂,做手工,或者練習寫作技巧都可以。

          個人觀點:我相信廣告能夠給你帶來許多靈感。廣告當中包含了大量的類比、隱喻,設計師可以借此創造具有說服力的設計。

          13. 歡迎建設性的意見和批評

          我們很多人都害怕接受批評。我們的工作確實不完美,特別當我們投入了大量的時間和精力的前提下,還做不到完美,聽到批評確實會緊張甚至抵觸。但是批判性地看待我們自己的工作是很有必要的。因為:

          你不是為你自己而設計,你是為你的用戶而做設計。

          平復情緒,接受建設性的批評,從教訓中學習往往更加深刻。在批評中成長固然不那么好受,但是卻能夠帶來長足的成長。

          批評可能不會令人滿意,但是這是必要的。它和疼痛的功能是一樣的,讓人注意到不健康的狀態?!鸺獱?

          下面是一些建議:

          • 學會過濾批評中的信息。將情緒和意見分離開來,找到對自己有用的信息。
          • 請求誠實的意見。確保批評和分享中包含真實的想法。
          • 定期詢問獲得反饋。
          • 不要局限于設計領域。向來自不同領域的人請教和學習。

          14. 批評和判斷他人的設計

          其實,評判他人的設計也是自我提升的一種方法。在這個過程中要注意:

          • 問對問題。能夠提出對的問題,能夠洞察到設計當中的關鍵,提出有價值的評判,一樣非常考驗 UX設計的眼力。
          • 不要提出不明智的建議??酥谱∧愕臎_動,提出有用有效的建議,如果某個部分需要重新設計,最好是帶著有效的數據來提建議。

          15. 學會休息

          一直保持工作狀態,是無法走得足夠遠的。事實上,人是很容易倦怠的,無論是身體還是精神,都很容易在不同的壓力之下,引發情緒和身體上的疲憊。

          設計師也經常會在設計中碰到死胡同。當你出現這樣的局面的時候,一定不要死扛,先休息一下,散步,呼吸新鮮空氣,能夠幫你更好地調整狀態。

          結語

          偉大的設計師從來都不是天生的,他們是在不斷的訓練當中逐步培養出來的。無論我們有著怎樣的經驗,總會有辦法不斷改進和提升。


          案例研究:一款助眠APP的UI設計分析

          藍藍設計的小編

          現在,我們發現健康類APP越來越多了:健身應用程序、跟蹤器、卡路里計算器、水和食物日記、活動提醒等等,這些APP的確對我們保持日常健康提供了幫助。

          偽類和偽元素

          seo達人

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

          定義:

          偽類和偽元素就是為文檔中不一定存在的結構指定樣式,或者為某些元素(甚至文檔本身)的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。

          偽類的形式:選擇符: 偽類{ 屬性:屬性值 }

          偽元素的形式:選擇符:: 偽元素{ 屬性:屬性值 }

          CSS3規范中要求使用雙冒號(::)表示偽元素,以此來區分偽元素和偽類。

           

          鏈接偽類

          a:link{…}  //指向未訪問的鏈接

          a:visited{…} //指向已訪問的鏈接

           

          動態偽類

          E:hover{…}  //元素上有鼠標指針停留

          E:active{…} //元素被用戶輸入激活

          E:focus{…}  //元素擁有輸入焦點

           

          偽類的順序很重要,一般為link-visited-focus-hover-active。動態偽類可以應用到任何元素,可以為用戶提供一種“強調”的作用。


          E:first-child{…}

          為父元素(可以body,div,ul,ol等)中的第一個子元素E元素設置樣式,注意,E必須是父元素中的第一個子元素。

           

          E:lang(value)

          為E元素中lang屬性為value的元素設置屬性。相當于E[lang |= “value”]。

           

          結合偽類

          a:link:hover{…}//鼠標停留在未訪問的鏈接上

          a:visited:hover{…}//鼠標停留在已訪問的鏈接上

           

          偽元素選擇器

          在文檔中插入假想元素,導致用戶代理對一個假想元素做出響應。

          p:first-letter{…}  //設置首字母樣式,為p塊級元素第一個元素設置樣式

          p:first-line{…}   //設置第一行的樣式,為p塊級元素第一個元素設置樣式

          所有偽元素都必須放在出現該偽元素的選擇器的最后面。

           

          設置之前和之后元素的樣式

          E:before {content:”…”}

          E:after {content:”…”}


          注:關于偽類和偽元素,我的理解并不是很深,不過掌握上面的這些內容,我想也是夠用了。以上內容大部分是《CSS權威指南》中內容,總結了一下方便記憶。關于偽類和偽元素的內容,這里有一個不錯的文章,下面是這篇文章的鏈接:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto 下面的內容引自這篇文章,可以補充上面的內容,貼在這里方便自己日后查閱。

          偽類與偽元素的具體用法


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

          如何開始學UI?入學UI的五大問題!

          藍藍設計的小編

          1.我想學UI,請問看什么書啊?

          2.我想學UI,請問哪個培訓機構比較好?

          3.我想學UI,請問如何入手?

          4.我不是設計專業,但是我還是想學UI,請問如何系統學習?

          5.我不管,我就是要學UI,請您給點兒建議。

          界面視覺設計 5 要素之字體篇

          資深UI設計者

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


          字體是界面設計中重要的構成要素之一,它能輔助信息的傳遞,是文字的外在表現形式;字體還可以通過其獨有的藝術魅力,表達情感體驗,并塑造品牌形象。

          本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。

          一、字體

          1. 字體設計的重要性

          輔助信息傳遞

          文字是信息內容的載體,是記錄思想、交流思想、承載語言的圖像或符號,而字體則是文字的外在形式特征,是文字的視覺風格表現。合適的字體可以輔助文字,將信息清晰、準確地傳遞給用戶。

          表達情感體驗

          字體的藝術性體現在其完美的外在形式與豐富的內涵之中。在文字信息傳遞給用戶之前,人們首先感受到的是字體帶來的視覺魅力以及情感表達。

          塑造品牌形象

          不同字體有著不同的風格特征: 有的字體優美清新、線條流暢;有的字體造型規整、充滿張力;還有的字體生動活潑、色彩明快……根據產品的屬性選擇正確的字體,便能有效地塑造品牌形象。

          2. 界面常用字體推薦

          字體的選擇是由產品屬性或品牌特性的關鍵詞而決定。一般中文字體種類分為:黑體、宋體、仿宋、楷體等;英文字體種類分為:無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

          中文字體推薦

          線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。其中 iOS 系統默認中文字體是「蘋方PingFang」,Android 系統中文字體使用「思源黑體Noto Sans CJK」。

          介紹下「思源黑體」這款字體,它是由 Google 和 Adobe 合作開發出來的,風格介于現代和傳統之間,可以廣泛用于多種途徑,比如手機、平板、桌面的用戶界面、網頁瀏覽或者電子書閱讀等。它為人們帶來了愉悅和的信息閱讀體驗,并且是免費的。

          英文字體推薦

          線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統默認英文字體為「San Francisco」,Android 系統默認英文字體為「Roboto」。

          Helvetica 是一種被廣泛使用的西文字體,1957年由瑞士字體設計師設計,微軟常用的 Arial 字體也來自于它。

          作為一款經典的無襯線字體,Helvetica 在平面設計和商業上非常普及和成功,被認為是現代主義設計理念的典范,其簡潔樸素的線條風格非常受追捧。

          數字字體推薦

          線上數字字體推薦使用 DIN、Core Sans D、Helvetica Neue。

          DIN 起源于1995年的德國,無襯線字體,易用耐看、字形開放,是設計師最愛的幾類字體之一,適合顯示比較長的大號數字,但是小字號的情況下識別度較低。

          Core Sans D 是由韓國設計師設計的一款無襯線字體,支持 Thin、Light、Regular、Medium、Bold 等類型字重,對大號數字的顯示效果不錯,不過它是收費字體。

          Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴謹、沒有多余的修飾外,還是 Helvetica 的升級版,擁有了更多的字重,可以作為 iOS 和 Android 跨平臺數字字體使用。

          二、字號

          1. 關于字號

          字號是界面設計中另一個重要的元素,字號大小決定了信息的層級和主次關系,合理有序的字號設置能讓界面信息清晰易讀、層次分明;相反,糟糕無序的字號使用會讓界面混亂不堪,影響閱讀體驗。

          2. 字號的選擇

          字號的選擇,可以遵循 iOS 、Material Design、Ant Design 等國內外權威設計體系中的字號規則,也可以根據產品的特點自行定義。

          iOS 字號規則

          在 iOS11 系統中,使用 San Francisco 作為系統英文字體,包含了以下幾種字號的文本樣式:

          • 11pt / 12pt Caption 說明文字
          • 13pt Footnote 腳注
          • 15pt Subhead 副標題
          • 16pt Callout 標注
          • 17pt Body / Headline 正文 / 模塊標題
          • 20pt / 22pt / 28pt Title 頁面標題
          • 34pt Large Title 頁面大標題

          需要注意的是,San Francisco 字體有兩種模式:文本模式 SF Pro Text 和展示模式 SF Pro Display,文本模式適用于字號小于 20pt 的文字,展示模式適用于字號大于等于 20pt 的文字。

          Material Design 字號規則

          在 Material Design 設計體系中,使用 Roboto 作為英文字體,規定了以下文字排版的常用字號:

          • 12sp 小字提示
          • 14sp(桌面端 13sp)正文 / 按鈕文字
          • 16sp(桌面端 15sp)小標題
          • 20sp Appbar 文字
          • 24sp 大標題
          • 34sp / 45sp / 56sp / 112sp 超大號文字

          長篇幅正文,每行建議 60 字符左右,短文本建議每行 30 字符左右。

          Ant Design 字號規則

          Ant Design 受到5音階以及自然律的啟發定義了10種不同的字號,從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

          建議主要字號為 14px,其余字號的選擇可根據具體情況進行自由的定義,盡量控制在3-5種之間,保持克制的原則。

          Kiwi 字號規則

          Kiwi 是餓了么的中后臺設計語言,致力于打造出能夠「了解、洞察、溫暖、激勵用戶」的產品。

          在 Kiwi Web 中,規定最小字號為 12px,主要文本字號為 14px,最大字號為 46px。

          三、行高

          1. 關于行高

          行高可以理解為一個包裹在字體外面的無形的框,字體距框的上下空隙為半行距。

          參考 W3C 原理,眼睛到屏幕的距離 25cm 為最佳閱讀距離。

          西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實且高度一致,沒有西文的上伸部和下延部來創造行間空隙,所以一般行高需要更大,根據不同人群的特點(兒童、年輕人、老年人)以及使用環境,可達到1.5至2倍甚至更大。

          2. 行高的設置

          iOS 行高設置

          Apple 官方的 iOS 字號與行高對應關系如下(@1x倍率):


          Fluent Design 行高設置

          Microsoft 官方的 Fluent Design 字號與行高對應關系如下(使用字體 Segoe UI):

          Ant Design 行高設置

          螞蟻金服的 Ant Design 字號與行高對應關系如下(優先使用系統默認字體):

          行高計算公式:L = F + 8。其中 L 是行高(Line Height),F 是字號(Font Size),F ≥ 12。

          四、字重

          1. 關于字重

          字重是指字體的粗細,一般在字體家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名稱。越來越多的產品界面需要通過字重來拉開信息層次,當下主流趨勢 iOS11 大標題風格就是通過字重來拉開信息層級的。

          不同的字重體現不同的層級關系和情緒感受,細的字體給人以細膩、輕盈的感覺,而粗體則給人莊重和嚴肅的感受,所以在定義字體規范時候需要考慮什么場景用什么字重,從而保持良好閱讀體驗。

          2. 字重的設置

          字重的設置同樣基于秩序、穩定、克制的原則。為了統一整體效果,一般情況下使用兩種字重為佳,例如只出現 Regular 以及 Medium 這兩種字體粗細,特殊情況下可以使用更粗或更細的字重進一步拉開信息層級。

          當字號大小為 12-18pt 時,使用 Regular;20-26pt 時,使用 Light;28-34pt 時,使用 Thin;當字號大小超過 34pt 時,建議使用 Ultralight。

          以上是按字號與字重反比的規則設置,即字號越大,字重越輕。當然也可以按正比的規則或者自定義規則,具體還是要根據產品的定位和用戶的特點來設置,以保證信息層級清晰明了為準。

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

          體驗設計中的 affordance

          ui設計分享達人

          這個詞,國內有很多翻譯版本——示能、功能可供性、承擔特質、直觀功能、預設用途、可操作暗示、支應性、示能性等...目前“功能可供性”使用較多。但無論通過哪個詞匯來講,可能都不會很清晰的傳達其含義。


          vue生命周期鉤子函數(11個)

          seo達人

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

          說一下vue的聲明周期:

          vue 的生命周期11個鉤子函數是按照以下的順序來的 :(不可逆轉哦,第11個除外) 
          一. 組件創建前后

          1.beforeCreate
          2.created
              
          • 1
          • 2

          如,寫一個子組件,然后掛在到父組件,在子組件中,console.log 子組件中的

          data(){ return { a:1 },
              beforeCreate(){
                  console.log(this.a)//undefined },
              created(){
                  console.log(this.a)//1 }
          }
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11


          .


          二. vue啟動前后

          3.beforeMount 4.mounted
              
          • 1
          • 2

          這兩個的意思就是, 
          vue在beforeMount時,還不管事,也就是說,還沒有渲染數據到<div id="app"><div/>里面,此時的這個組件還是空的

          mounted時,才會往<div id="app"><div/> 添加東西,也就是vue正式 
          接管<div id="app"><div/>

          可以獲取#app的innerHTML查看差異;

          beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
          },
          mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的內容 }
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6


          .


          三. 組件更新前后

          5.beforeUpdate 6.updated
              
          • 1
          • 2

          這個就不用我多說了吧?當子組件里面的 視圖改變 的時候觸發。 
          如,做一個按鈕,讓data里面的a++,假如 一開始a是1 
          beforeUpdate返回1 
          updated返回2

          beforeUpdate(){
              console.log(document.getElementById('a').innerHTML)//1 },
          updated(){
              console.log(document.getElementById('a').innerHTML)//2 }
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          再點一次 
          beforeUpdate返回2 
          updated返回3。。。 

          .


          四. 組件銷毀前后(一般配合v-if使用)

          7.beforeDestroy
          8.destroyed
              
          • 1
          • 2

          給這個子組件用v-if來控制它的銷毀和創建,注意以下:v-show不行。 
          子組件銷毀前觸發beforeDestroy 
          子組件銷毀后觸發destroyed 
          第一次會觸發7.8. 
          創建子組件后會觸發以上的第1.2.3.4.鉤子函數。

          有一個問題,如果我們在子組件里寫一個定時器,然后,子組件被銷毀了,定時器還會執行嗎? 
          答案是會的 
          所以這時候就會用到了destroyed,在組件被銷毀后,我們把定時器給清除就好了。

          所以這兩個鉤子函數一般用于做性能的優化。 

          .


          五. 組件激活時,未激活時

          9.activated
          10.deactivated
              
          • 1
          • 2

          這兩個鉤子函數呢一般配合<keep-alive><keep-alive/>來使用。 
          通過看 四。這個例子,你肯定知道了一個組件怎么被銷毀和創建。 
          但是我們知道通常一個組件是很大的,如果我們總是一直創建、銷毀、創建、銷毀。。。這樣很不合理,而且很浪費性能。。。

          這時候我們就可以用<keep-alive><keep-alive/>配合著兩個鉤子函數來控制組件的激活和不激活。

          說一下<keep-alive><keep-alive/>,它就相當于把你的組件給緩存下來了,目的呢就是不讓組件重復的渲染,然后我們通過v-if觸發,子組件就不會再觸發7 和 8 了,而是只會頻繁的觸發9 和 10 
          這樣性能會比7 和 8 好的多。 

          .


          六. 當捕獲一個來自子孫組件的錯誤時被調用

          11.errorCaptured
              
          • 1

          當子孫組件報錯的時候,父組件會觸發這個鉤子函數,并且會返回三個參數, 
          第一個參數是 錯誤對象 
          第二個參數是 報錯的子孫組件 
          第三個參數是 報錯的子孫組件的具體哪個地方報錯。(如,假如我沒有定義b這個變量,但是我去console.log(b) 這一句肯定會報錯,假如我把這句錯誤代碼寫在了created這個鉤子函數里,那第三個參數會返回就是:created hook

          具體第11個沒深入研究,喜歡的可以去看下官網的 errorCaptured。

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


          半年做了兩個APP,我總結出這6個實戰經驗

          資深UI設計者

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

          一、團隊工作,妥協是一門學問

          一個產品最后出來的樣子,是各種妥協的結果。

          互聯網產品和平面類型的設計工作最大的區別,可能是在于工種的細分上。之前做平面相關的工作(品牌,視覺,電商),自己一個人可能就充當了基本上除了印刷以外的所有主要工作,既要和客戶溝通,了解用戶需求和想法以及存在的問題,又要思考和制定設計方案,向客戶展示設計提案,又要執行獲得認可的設計提案,保證設計成果符合客戶預期并落地,如果是最后要交付印刷品,可能還要跟進印刷的過程,保證印刷物料的質量。好像一個人把所有的活都要干了。

          但是互聯網產品不太一樣,首先最大的問題是如何讓方案落地的過程,這個工作一般來說沒有辦法一個人干(除非是牛到精通前端后端和客戶端的各種開發語言的全棧設計師),因為會涉及到程序開發,有一些設計師,就算你厲害了,你能把產品交互和 UI 都搞定,然后你還會(web端)前端開發語言或者客戶端開發語言,但是你還是需要一個能寫后臺的工程師,所以,正常情況下,互聯網產品的開發,是環環相扣的,至少都需要兩到三個人來配合工作。這還是比較小型的產品,如果是復雜的產品,那每個環節都必須細分出來,而且可能每個環節都不止一個人,產品,交互,UI,前端,客戶端,后臺,因為每個環節的工作量都太大了!

          △ 圖源:Nick Taylor

          既然有這么多的分工,那必然會導致不同的工作崗位看問題的點都是不一樣的。舉個例子:經常會聽到開發說,明明用 A 就可以,為什么非要用 B?一開始的時候,其實我真的不太理解,但是后來慢慢熟悉了開發的工作之后(尤其是自己開始學習一些代碼知識之后)慢慢理解了,其實開發在實現我們的設計的時候,最關注的是功能的實現,而功能就是各種交互的集合,一個頁面上,如果交互不變,功能不變,只是改一些視覺上的樣式,這是相對來說簡單的,如果牽扯到交互的調整和修改,那個工作量可能就成倍增加,所謂牽一發而動全身。所以我們在設計的時候,更要注意模塊和組件的一致性和可復用性,這樣不僅可以提高我們的設計質量,也可以有效的減少開發的工作量,提高開發的效率。

          同時,開發在實現的第一個版本的產品中一般很多時候視覺上會有各種各樣的問題,開發人員在開發過程中,為了提率,不太在意還原 UI 的細節,比如這個間距是多少,那個間隔是幾個像素,所以最后產品上線前都會有 UI走查的環節,在這個過程中就是要一點一點地改進產品UI 實現中不符合設計稿的地方,這個時候才是我們設計師關注所謂的每一個像素的時候,在那之前,還是先關注功能和流程的實現吧。

          其實不僅僅是因為每個崗位的職能不同會導致很多不同的意見,有時候也可能是因為每個人的審美或者是性格的問題,也會產生不少的摩擦,所以,學會妥協,在妥協中堅持是團隊合作中的一門大學問。

          二、把自己定位為產品設計師

          以攻為守,讓自己從更全面的視角去思考 UI 的工作。

          △ 圖源:Nick Taylor

          一個 UI設計師的未來在哪里?有時候我會思考這樣的問題,有可能是因為我已經30了。這一兩年,危機感很重,每次看到非科班群里各種90后、95后的年輕設計師,心生羨慕的同時也充滿了莫名的壓力。

          這半年多因為自己團隊中沒有專門的交互設計師,所以我就同時肩負了大部分交互設計的工作。一開始做交互設計的東西,其實自己的認識還是很淺薄的,雖然平時自己也看很多用戶體驗,設計心理學、交互設計等等的書籍,但是真的上手干活,還是會經常一頭霧水,因為交互設計太需要縝密的邏輯思維了。市場上常見的 app 的標準化的交互設計因為都有競品參考,還是相對來說簡單的,在我看來比較難的是工具型的產品和 CMS(內容管理系統后臺),尤其是 CMS 的交互設計,如果設計不好,分分鐘讓用的人感覺要崩潰。交互設計是一門很深的學問,也是 UI設計師必須去了解和熟知的,它絕不是簡單的頁面之間的跳轉,也不僅是酷炫的動效,它是能讓產品的使用體驗得到質的飛躍的關鍵。

          如果把一個產品比作一個人,那產品本身的方向是這個人的靈魂和思想,交互是這個人的舉止和修養,而 UI 是一個人外形和穿衣品味以及整體氣質,優秀的人,三者缺一不可,三者是共生的關系。

          在我看來。成為一個產品設計師,了解產品思維,熟悉交互設計,精通視覺設計,這樣的設計師覺得才是以后互聯網設計師的標配。高配是什么?我覺得至少是全棧設計師吧。這就像平面設計領域,不懂印刷各種工藝和材質的,都稱不上好的平面設計師。好的建筑設計師,也得懂很多建筑學和建筑材料的知識。

          我在這半年的實際工作中,雖然第一個產品的概念定義和原型我沒有參加討論(我去的時候已經定下來了),但是我還是嘗試去思考這個產品到底意義在哪里,目標用戶是哪些人,解決了目標用戶的什么需求,他們的使用場景有哪些。我一直都認為互聯網產品的設計工作始終更是貫穿著設計思維,只是每個具體的分工的側重點不同,你可以不精于產品需求的整理和篩選,但你是得明白你你所設計的是為了滿足什么需求,有目標和方向才能做出更好的設計,你連問題都不知道,怎么去解決問題。設計的工作,終究都是為了解決問題,不了解問題的來龍去脈,便不能梳理出問題的本質,更無法做出好的設計去解決問題。

          把自己定位為產品設計師,稍微多花點心思去思考產品,去學習交互,別讓自己的眼界停留在只畫幾個好看界面,畫幾套特別的圖標,不然你早晚要被這個行業淘汰,不對,是被其他更優秀的設計師淘汰。

          三、牢記UCD,但別太天真

          很多公司并不真的在意所謂的 UCD。

          △ 圖源:Nick Taylor

          我相信大部分的設計師還是在中小型的企業里工作,這樣的企業的設計工作有一個很明顯的特征,就是以主管或者老板的喜好為第一滿足目標,所有的設計方案都會以老板的喜好為基準參考,只有老板說 ok 才算是 ok。當然,我們公司也是,畢竟我們也是一個小型公司,而且老板的個人風格特別強烈。所以在做第一款 app 時,僅僅是首屏的視覺方案,都出了不止七八個版本。在進入更加深入的其他頁面的設計環節時,我們也沒有去做什么用戶場景分析或者用戶需求分析之類的工作,都是依照著老板的一些想法去一步一步的實現,當然,這并不是一定是錯的,只是大部分公司的設計工作的現狀,這樣也可能會有好的產品,只是可能性更低而已。很多公司沒有很專業的設計團隊,也沒有很專業的產品經理,更沒有很專業的產品設計師,做很多設計決策的時候基本上都是靠拍腦袋,或者依靠個人的生活或者設計經驗,在不知不覺中,就把 UCD 的設計方法忘在腦后了,UI設計師只是負責機械式美化下每一個元素,做一下視覺風格的統一,變成了一個不折不扣的界面美化師。

          但我們 UI設計師不能只是美化一下界面,雖然我們可以沒有專業的設計團隊,沒有很厲害的產品經理或者交互設計師,但是我們也要在設計過程中不斷地提醒自己,要以用戶體驗為中心,用戶在這個界面需要的是什么,什么信息對他來說是最重要的,怎么樣設計可以減少用戶的瀏覽負擔,提高用戶的使用效率,雖然可能我們思考的方向和結果的不一定對,但是只要去想,才能不斷強化我們自己的這個設計思維,避免自己產出千篇一律的設計方案,提高自己的設計能力。如果能把每一項工作都盡百分之120的努力去完成,那就算你現在是在一個微不足道的小公司,你也一定能成長為一個設計大牛。

          四、堅持學習,不斷提高審美和眼界

          現在作品不好,沒問題,如果一直都不好,那就是你自己真的出了問題。

          △ 圖源:Nick Taylor

          我以前很羨慕那種設計師,年紀輕輕就進大公司,或者20歲不到作品就讓人感覺眼前一亮。對于我這種非科班的,大學畢業7年了,認真靜下心來干設計才3年多,似乎還沒開始跑,就已經被人甩開一大截了。

          看起來似乎很糟糕,但其實真不是,你所經歷的一切艱難,如果挺過去了,那就是你人生寶貴的財富。那應該怎么做呢?只能不斷努力地去縮小和別人的差距,不對,不是和別人的差距,是和自己對自己期望值的差距。

          那么提高審美和眼界就是最基本要做的事情,同時我也認為這是作為一個設計師需要持續不斷提高的最基本的能力。審美和眼界的提高是需要日積月累的,軟件操作和技法可以短時間內突擊學習,也可以臨時偷師,但是如果你審美不行,你永遠都不可能做出好的設計,因為在你的眼里的高級和在高水平設計師眼里的高級,可能是天差地別。審美和眼界就像是一種設計師的隱藏屬性,會在你日常的設計當中不自然的流露出來,你不需要去調動它,它自然而然的就會在你的工作中不斷地幫助你。

          但是往往很多設計師不把這個當一回事。其實你只要每天堅持不停地看優秀的作品,堅持幾個月或者半年一年的,你的審美肯定都會有質的飛躍。以前你覺得設計很棒的作品,可能你以后看起來就會嗤之以鼻了。

          看作品這件事其實很簡單,你只要每天打開 behance,打開首頁推薦的十個作品,花個十幾二十分鐘細細看下來,覺得好的就分類收藏一下,以備以后可以用來做設計的參考。

          但是,關鍵是堅持。

          五、重拾英語,不讓自己做井底之蛙

          別總看國內的設計網站了,外面的世界更精彩。

          為什么要重新學習英語?(我就是想萬一以后牛X了,可以混到國際舞臺上,嗯,這個可以有)

          一開始決定重拾英語的契機,這還要感謝砂姐組織的翻譯小組。我也只是想試試看,能不能把英語重新撿起來。于是從17年2月份開始我給自己定了個目標,每個月翻一篇英語的設計類文章,很慶幸自己堅持下來了。同時在工作中遇到的不少問題,會逼著我去看一些外文的資料,讓我覺得我必須得更努力地把英語撿起來,于是最近幾個月同時也開始背單詞,每天堅持讀英語的設計文章,跟一開始比,感覺還是很有收獲的,看文章的速度越來越快,閱讀時的語感也越來越好(這個越來越好是相對于自己很糟糕時候的狀態)。

          慢慢地,我感覺,學好英語,對于一個設計師的長遠發展是很有幫助的。

          如果你想去了解世界上更多優秀設計師的想法,學習他們的經驗,那么就得親自去獲取第一手的信息,而不是等著其他人的翻譯,而且很多各種設計領域的優秀的教材和資料都只有英文版本,如果不把英語學好,自己學到的不僅僅是很多殘缺不全的二手資料,甚至連學習的機會都沒有。把英語學好,是給自己打開通往更廣闊領域的鑰匙。你的眼界,決定了你成就的上限。

          六、接觸代碼,發現一個新世界

          學習從來都不是件輕松愉快的事情。

          做界面的同學有沒有遇到過這樣的情況:我明明是設計成這樣的,為什么開發出來之后就變成那樣了?

          這就是我下定決心想學習代碼的導火索。我就想,為什么我不能自己學習代碼自己實現自己的設計么?這不是很厲害么?加上我之前也斷斷續續地對前端技術有過學習的念頭,于是一鼓作氣下定決心就開始學了。

          出于想給自己開發個人網站的初衷,我就選擇了前端的開發語言作為我的學習內容。我目前主要學習的是 Javascript(html 和 css 已經學了個大概)。

          一開始學習的時候真的是痛苦不堪,但是在度過了一兩個月的痛苦的煎熬之后,已經慢慢地發現學習代碼的樂趣,但同時,發現這個坑是越來越大,感覺要學的東西是自己預想的要多太多了。雖然過程很糾結也很痛苦(我估計這種痛苦的感覺還會持續好長時間),學習代碼的過程對于提高設計師的邏輯思維確實很有幫助,因為編程思維和設計工作的思維相比,更注重邏輯性(設計工作也很注重邏輯性)。同時,多了解一些編程的知識(編程開發的語言很多,但是思維方式是類似的)對于理解開發人員的工作內容和工作方式,也會有很大的幫助?;ヂ摼W的設計師,我覺得在學有余力的情況下,都應該多多少少學習一些代碼的知識,因為這畢竟也是產品開發的其中的一個重要環節,你不需要擅長,但懂一些,可以讓你更好地和開發人員進行有效的溝通,知己知彼,減少撕逼。但是不建議設計工作經驗較少的同學學習代碼,畢竟這需要很多的時間去學習,不要把自己變成什么都是半桶水,在不影響設計工作之余可以抽出時間的話讓自己嘗試一下,說不定你也會喜歡上編程這件事。

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

          AI教程!教你繪制一只夢幻效果蝴蝶

          藍藍設計的小編

          設計師不光要會做軟件設計,一些造型的表達也是很重要的,今天那就隨我來看看這只蝴蝶是怎么做出來的吧。

          React生命周期函數詳解和注意事項

          seo達人

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

          React生命周期函數

          生命周期函數是指在某一個周期自動執行的函數。 

          React中的生命周期執行過程

          以下是React中的常用的生命周期函數,按個部分中按照自動執行順序列出,這幾個過程可能存在同時進行

          初始化過程(Initialization)

          • consructor()里面初始化PropsState屬性。

          掛載過程(Mounting)

          1. componentWillMount():在組件即將被掛載到頁面的時刻自動執行。
          2. render():將組件掛載到頁面。
          3. componentDidMount():組件被掛載到頁面之后立即執行。

          更新過程(Updating)

          1. componentWillReceiveProps():一個組件要從父組件接收參數, 只要父組件的render()函數非首次(如果這個組件第一次存在與父組件中不會執行,如果已經存在于父組件中才會執行)執行了,子組件的這個生命周期函數就會被執行。如果組件沒有Props屬性則直接跳過
          2. shouldComponentUpdate():組件更行之前檢查是否需要更新,注意這個函數要有一個布爾類型返回值,如果返回false,這一部分的生周期 函數將不會繼續執行,即無論如何組件都不會更新。利用這個生命周期函數可以強制關閉不需要更新的子組件來提升渲染性能
          3. componentWillUpdate():組件更新之前。自動執行。但要在shouldComponentUpdate()執行并返回true之后執行。
          4. render():將組件更新到頁面。
          5. componentDidUpdate():組件更新完成之后立即執行。

          移除過程(Unmounting)

          • componentWillMount():當組件即將被頁面剔除時執行。

          注意事項



          日歷

          鏈接

          個人資料

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

          存檔

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