山东11选5
勤學教育網合作機構>沈陽培訓學校>

沈陽迪派教育

歡迎您!

分享

全國統一學習專線 8:30-21:00
沈陽迪派教育
小班VIP授課 一對一互動教學
項目實戰案例教學 自有實訓場地
專業團隊定制企業需求課程 超長的學習課時
沈陽迪派教育> 沈陽教育培訓>

沈陽好的ui培訓學校

  • 課程介紹

  • 學習資料

  • 2019-08-21
沈陽ui培訓

在設計師的細分崗位中,UI設計師是最火的。特別是在2010年-2016年之間,它伴隨互聯網商業爆發、創業風潮乘風而起,0基礎學設計的,其他設計方向轉行的,蜂擁而入,職業需求高燒不退。您還在等什么呢?

什么是UI

什么是ui設計師
UI設計(或稱界面設計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設計,也叫界面設計。UI設計分為實體UI和虛擬UI,互聯網說的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

UI即用戶界面設計行業剛剛在全球軟件業興起,屬于高薪技術設計產業,與國外在同步發展水平。其次國內外眾多大型IT企業(例如:百度、騰訊、Yahoo、中國移動、Nokia、聯想、網易、微軟、盛大、淘寶等眾多企業)均已成立專業的UI設計部門,但專業人才稀缺,人才資源爭奪激烈。就業市場供不應求。
學UI,選專業的培訓機構才靠譜
我們不僅相信你一定能學會,更相信你一定愿意學習

  • 在線直播
    在線直播

    我們都是小班授課,線上線下互動學習,雙重保障教學品質。

    點擊咨詢
  • 項目教學
    項目教學

    采用公司實戰項目教學,杜絕虛擬教學手法,一切于公司接軌。

    點擊咨詢
  • 師資力量
    師資力量

    老師都是行業項目設計師具有10年工作經驗,5以上授課經驗。

    點擊咨詢
  • 企業訂單
    企業訂單

    入學簽訂單就業培訓,一地學習,全國就業,終身免費就業。

    點擊咨詢
  • 課程體系
    課程體系

    教研組制定與企業實際接軌課程體系,完整課程,以實戰為主。

    點擊咨詢
  • 學會為止
    學會為止

    我們無學期限制,學會為止,終身免費進修一直是迪派的承諾。

    點擊咨詢


沈陽迪派教育為您精心打造的課程體系
不僅讓你成為一個好的平面設計師,還能讓你成為一個優良的網頁設計師,更能讓你成為一個專業的、潮流的、時尚的、有“錢”景的UI界面設計師。

課程階段 課程內容
階段一
設計基礎訓練
■ 學習各行業軟件基礎運用。
■ 運用軟件,簡單案例的臨摹與設計
■ 站在巨人之上-從吸收到原創
■ 講解實際案例規范,以及整體設計流程
■ 軟件的深入學習與應用
■ 針對所學專業,作品欣賞與講解
■ 熟悉PS、AI軟件的配合,與真實案例相 結合
■ 完成設計案例
■ 作品如何進一步改進
階段二
UI設計理論
■ 包含平面構成的概念、形態的基礎理論、形態...
■ 學習和掌握立體形態的構成要素和美的形式包括立體構成的概念,造型基礎及表現,造型...
■ 主要研究的是視覺形象在平面上的組合形式
階段三
圖標圖形界面設計
■ UI icon 肌理質感圖標
■ UI icon 登陸、下載圖標
■ UI icon 導航分類圖標
■ 講解實際案例規范,以及整體設計流程
■ Iconworkshop圖標適配與輸出
■ 熟悉界面設計流程和網站用戶的操作習慣。
■ 扁平化設計及實戰
■ 效果與功能綜合運用
■ 分層結構的手法及導航的應用
階段四
UI交互設計
■ 產品競品分析方法/平臺移植策略
■ 產品的交互設計的基礎及流程概覽
■ 手機APP的交互及視覺設計-Android平臺
■ 交互軟件的深度學習
■ 交互設計專家點撥與部分學員訪談
階段五
CEO講堂+實戰訓練
■ 實戰項目基礎了解,簡單的交互設計入門
■ 實戰:簡單手機APP設計-IOS平臺的產品UI設
■ 設計的迭代過程   ■ 讓客戶買單的5個方面
■ 實戰設計與實現   ■ 原有產品的分析
■ 報告的書寫要素   ■ 思考>流程>視覺
■ 提案設計流程   ■ 實戰研究與分析階段
■ 實現驗證與完善階段   ■ 競爭對手簡單的分析
■ 我的新方案設想   ■ 在手機中測試我的原型
 

師資陣容
迪派教育培養學生成為一個個適應現代社會的綜合性人才;辦良心教育、做學生人生教練、為企業輸送合格人才是迪派學校努力方向。

  • 2年UI設計
    劉政達
    北京師范大學畢業,從業經驗: 12年UI設計,高級設計師:界面設計和平面設計。
  • 授課親切
    張赟
    授課親切自然,大量實戰案例講解,課程中注重實操演練,整個授課思路清晰。
  • 專業知識
    王玉雪
    深厚的專業知識、豐富實戰經驗和務實專業態度,語言簡練、風趣幽默,親和力。
  • UI設計
    徐久寧
    資深網站規劃及UI設計,曾就職于知名公司,參與并開發知名企業大型網站項目。


我們只做項目實戰培訓
來看看我們在行業里面到底有哪些優勢

迪派教育ui設計

詳情請進入 沈陽迪派教育 已關注:55 咨詢電話:

前言

如何從多角度去解析組件化的概念,幫助我們理解、構建產品組件庫。前文我們提到了流程優化給我們的設計工作都帶來了哪些直觀影響;本文將深入細節從多角度去解析組件化的概念,幫助我們理解、構建組件庫。

設計組件化的概念本身是從程序的開發模式中演變而來;開發中的工程化思維是不是也可以幫助我們高效的管理設計稿呢?產品的快速迭代中,原本固化的工作模式越來越不適應環境的變化;而研究各種工具、優化設計流程、開放設計思維可以讓設計師有更多時間去優化體驗、尋求設計價值。

關于組件化可以對團隊產生多大的影響,可以去我的上篇《起點讀書改版實戰》查看,組件化管理對于設計師來說,迭代效率得到顯著提升,設計團隊能夠主導產出的優化結果增多。

我們日常使用的 Sketch 之所以能成為目前最主流的產品設計工具之一,我個人認為在于它的每一次更新,都可以多多少少解決目前設計過程中的某些痛點,而科學的使用這些功能會將設計師的能力最大限度發揮出來。那么如何將項目組件化?本文將從起點讀書的組件化案例中吸取核心內容與大家分享。

理解產品結構

業務屬性的不同,對于產品整體布局的影響也存在差異,讀書、社交、電商、新聞、視頻等品類App都有自己獨有的組件結構;而相同品類下的產品結構基本大同小異,以讀書類產品為例,橫向對比,大部分的閱讀頁、精選頁、書詳情頁結構基本相似,唯一不同的是業務各有不同,模塊位置等有所差異,但是從組件復用性上看都存在極大相似度。

并不是各類產品廠商不想做差異化,而是本身的業務屬性對于大部分用戶來說已經形成一條比較成熟的數據排版結構,較大的改變會招致用戶的反感,雖然可博得部分用戶的追捧,但這樣的「創新」對于一個成熟產品而言卻是不利的,因此我們往往會把更多的差異放在組件細節上;所以理解產品的結構可以幫助我們快速構建組件庫的基本框架,在此框架基礎上可以對組件大致做下分類和優先級排序。

組件歸類

對自己負責的產品結構有所認知后,我們就需要對產品結構進行程度上的解構、分類;組件 (UI層面上的) 的歸類通常分為四種:原生組件、擴展組件、自定義組件、封裝組件。

原生組件,顧名思義就是系統本身自帶的組件類型,例如按鈕、導航、彈窗等等。

擴展組件,是基于原有組件基礎,進行功能擴展,例如在導航欄上加下拉操作,在彈窗中加操作項等等。

自定義組件,所謂自定義組件就是原本系統中沒有,我們根據產品特點創造出來的特有組件。

封裝組件,是指對產品中經常出現的一系列場景頁面進行組合封裝的復雜組件。

這四個概念中,原生組件和擴展組件都屬于系統(Android & iOS官方規范)導向的類型,所以我們暫且統稱為基礎組件;這類組件存在于大部分App中,例如導航欄、工具欄、彈窗、toast、按鈕等就是基礎組件。

自定義組件和封裝組件,具有較強的產品功能導向,因此稱為屬性組件。這類組件跟產品功能有較強的關聯性,比如效率管理App中常用的日歷組件,視頻App常用的播放器組件,讀書App內的推書列表組件、金融App內的行情趨勢組件等。

做這樣的區分,可以讓我們對組件有更加充分的理解,兩個類別的組件在構建時也存在較大的差異,區別對待可以幫助我們更好的理解、構建和調用;有了明確的定義,我們在構建組件庫時就能明確類型,合理規劃,有效的進行搭建的前期工作。

顆粒化管理與傳統窮舉法區別

窮舉法顧名思義就是將產品中使用的所有組件全部列舉出來,好處在于比較直觀,沒有復雜的組合邏輯、方便交接,壞處是比較難以管理、拓展性小,文件冗余、牽一發動全身等。

顆粒化管理是將組件進行模塊拆分再拆分,充分提高細小組件的的復用率;具體是就是將組件先拆分為具有復用性的模塊,進一步再對復用性的模塊進行模塊拆分,以此類推,通常拆分到圖標、文字等單一元素時已經是最小顆粒了;如果需要調整其中某一模塊時,只需進行獨立調整,就可讓全局隨之響應,而其他模塊不會受其影響。這種管理方式的優點諸多不一一贅述,缺點在于這樣的組件擁有一定的復雜度,理解需要花費一點精力。

從組件結構角度來看基礎組件結構表現單一,但是表現形式與內容多樣,所以通常會多以顆粒化作為構建首選;屬性組件表現形式復雜還存在許多嵌套關系,但是表現形式與內容單一,所以通常會以顆粒化和窮舉法混合作為構建方式;從類別與布局的關系上可以看出,顆粒化是組件庫構建不可或缺的一個重要環節。

結構細分

結構細分其實就是將本身獨立的組件進行打散、細化、整合、重組,過程中我們對特定位置的常用組件進行模塊整個,使每個模塊都可以獨立變化替換,這種多嵌套組合式的細分可以讓組件最終展現出來的樣式以幾何倍數量增長,這是窮舉法完全無法達到的構建方式。

通常拆分后的布局可分為兩個場景來表現,第一個場景是組件庫可實現的細分結構,如位置、尺寸、顏色、字體樣式、圖標等;第二個場景是在設計稿中進行的細分,通常指圖片、文案。

位置、尺寸的結構細分:起點讀書擁有近百種導航欄的樣式,但是從布局結構上來看,大致可拆分為狀態欄、背景、左操作項(左組合),中間展示項(中組合),右操作項(右組合)這五個模塊,每個模塊可以獨立產生新的樣式或向下細分新模塊以適應新的產品需求;不過這里有兩個注意點,一般模塊拆解到按鈕、圖標等最細顆粒后通常不會再進行拆分,并且拆分模塊不建議層級超過4個層級。

顏色與字體樣式:可通過 Sketch 自帶的 Layer Styles 和 Text Styles 進行管理,也可通過 Craft Manager 來管理。

圖標:作為最常用的基本單位,出現頻率較高,因此在建立時需要有一定的秩序規律,繪制好整齊排布在組件庫的特點位置就可以。

圖片與文案:通常在設計稿鋪設階段才會使用,可以通過 Sketch 自帶的素材管理功能 「Data」來管理,當然我們依然可以用 Craft Manager 來管理這些素材。

響應式布局

這個功能以前只能借助第三方插件來得以實現,不過后來 Sketch 官方也提供了 Resizing 的功能,從基礎結構來看僅有6個選項,但是我們可以通過不同的組合來實現更多基礎適配方式,而在此基礎上還可以搭配一些嵌套規則來實現更多的適配效果。

具體我們稍作一下解釋,前四個從圖標就可以看出分別是固左、固右、固頂、固底,后兩個分為為固高、固寬;對一個元素設置了固左、固寬后,執行左右拉伸操作時設置的元素就有了左對齊的適配效果;對一個元素設置了固頂、固底后,執行上下拉伸操作時設置的元素就有了固定間距的適配效果;除此以為也有一些組合是相沖的,比如設置了固左、固右后,是不能再這種固寬的,這兩個也是一種相反的效果。

嵌套的運用也稍作一下解釋,因為基本操作已經比較清楚了,我們看(實例1)就能明白。

如果一個組件需要同時支持上下左右同時拉伸時,設置項就相對復雜了一些,這里我們還是來通過實例來認知一下概念。

因為運用了顆粒化的管理方式,所以基本上每一個前臺展示的最終組件都會含有嵌套組件模塊,我們在搭建組件時如果把這些適配也一并考慮進去,不管對于開發還是對于其他同事的理解都有比較大的幫助,當然如果你所在的公司是通過 Sketch 交付設計稿,那么這項操作會讓你的開發小伙伴對你肅然起敬,因為這會減少很多為適配而花費的精力。

如何命名

上面提到的組件歸類、顆粒化都需要命名作為基礎,細分后的模塊如何查找、區分,設計稿如何調用組件,這些都離不開合理的命名引導。因此命名可以說是構建組件庫非常重要的一個環節,合理的命名會讓整個組件庫布局條理清晰、結構縝密,實際使用時能夠幫助我們快速定位。

如果按層級的方式做區分的話,命名通常分為二大類:

1. 組件分類名:

通常指組件的準確名稱,如導航、工具欄、彈窗、按鈕等。

2. 組件的的細分模塊命名:

這類模塊目前沒有標準所參考,但是我們可通過一些最容易理解的特征來區分,比如位置、數目、形狀、顏色、情感(積極操作、消極操作)等作為命名依據,如果一個模塊同時保有這些特征,可以在構建初期就定好層級的優先級。

此處以導航欄為例,畫圈部分的命名為「導航/白色/_資源/左組合/1圖標」,「/」是 Sketch 區層級用的符號,「_」純粹是為了讓資源能夠在列表內置頂使用的一個小技巧,如果是此模塊下的元素只需對「左組合」后面的信息做調整就行。

雖然從工程化角度來看,這種方式會顯得不夠嚴謹,但從使用、理解角度出發,這個方法相對高效,還易上手快速形成認知。

實際使用流程

組件庫經過一系列的操作搭建完成后,那么后續,我們如何通過它來運作,我們通過上圖可以有個直觀的了解:

1. 區分組件類別,并在此類別區進行操作

2. 進行組件布局,模塊搭建

3. 布局同時不要忘記設置Resizing

4. 對命名再進行一次梳理

5. 保存

6. 設計稿更新調用

7. 模塊拼合,選取需要用的樣式

8. 調整文案、圖片、圖標等

9. 完成

而參與項目合作的其他同學只需要執行第6~8條就可以了。

結語

通過組件化的建立,我們讓設計內部的產出有了統一標準,也與開發者之間搭起了一段新的橋梁;從設計稿到組件庫,之后組件庫到設計規范,再從設計規范到展示程序,最終展示程序影響到設計還原,我們通過優化深入將這四個之前關系并不明朗的概念重新改造結合,形成新的閉環。

通過新形成的閉環,與技術部合作建立出了符合開發者維度的組件化管理模式(起點讀書組件展示程序);對于設計團隊來說,迭代效率得到顯著提升,設計團隊能夠主導產出的優化結果增多,對于開發團隊來說,減少工作量的同時還原一致性也得到了保障;當然組件庫的意義遠不止于此,我們還會繼續優化、迭代,只求做到更好。
  • 校區分布
  • 學校相冊
  • 推薦課程
  • 相關學校
  • 相關文章

溫馨提示:提交留言后老師會第一時間與您聯系!熱線電話:

手機訪問

#tel_020#
山东11选5 美国女篮wnba比分直播 捕鸟达人更换背景 上海快三官方开奖 时时彩组六论坛 江苏十一选五开奖结果8号 双色球走势图表近50期 JDB财神捕鱼漏洞 重庆快乐十分走势图快 东方福彩6十1得奖规则 360新疆时时彩开奖