• Like
  • Save
當代網頁設計流程
Upcoming SlideShare
Loading in...5
×
 

當代網頁設計流程

on

  • 1,759 views

KSDG Web Course #4 http://registrano.com/events/azure-cloud-and-front-end

KSDG Web Course #4 http://registrano.com/events/azure-cloud-and-front-end

Statistics

Views

Total Views
1,759
Views on SlideShare
1,759
Embed Views
0

Actions

Likes
2
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    當代網頁設計流程 當代網頁設計流程 Presentation Transcript

    • 當代網頁設計流程Modern Design Workflow for Webapps感謝台灣微軟與鴻海科技贊助KDSGggggggkgggggg
    • @hlb不黑心也不能吃的布丁https://www.facebook.com/iamhlb
    • 和多 HandlinoRails/Web/UI Consulting/Training/Outsourcing
    • 快樂設計師HappyDesigner Meetup & Mini
    • g0v.tw 是一個致力於打造資訊透明化的社群,參與者來自四方,有程式開發者、設計師、社會運動工作者、教育工作者、文字工作者、公民與鄉民等,以開放源碼的精神為基底,關心言論自由、資訊開放,以最新的科技,幫助公民確實了解政府運作,有效監督政府,確保政府不脫離民有、民治、民享的本質。
    • WE WANT YOU
    • 對設計師的期待2003 年的網⾴頁設計師⽐比 2013 年好當多了
    • HTML5 CSS3 UIJSCoffeeSassLESSStylus最佳化 Sprites positioningWebAppOfflineStorageWebGL 3D SVG CanvasMediaQueryWebFont AnimationIE678910ResponsiveMobileDevices
    • 天天都有新鮮事
    • 當代網頁設計流程Modern Design Workflow for Webapps
    • 流程符合你跟你團隊的工作方法
    • • 制訂預期目標 business goals• 說故事 figure out user goals• 框架圖 wireframe• 模型 Mockup• 雛型設計 HTML prototype• 迭代開發 Iteration• 最佳化 Optimization• 下一回合 Again
    • • 制訂預期目標 business goals• 說故事 figure out user goals• 框架圖 wireframe• 模型 Mockup• 雛型設計 HTML prototype• 迭代開發 Iteration• 最佳化 Optimization• 下一回合 Again
    • 說故事User Story / Use Cases / Flow Chart
    • storyboard
    • Roles訪客:不需登入也可進行瀏覽的使用者管理員:有權限可進入編輯後台的使用者商品:電動設備,機具首頁・需要簡易的公司介紹以及營業項目內容(以文字說明為主)・需要有Google site search ,讓訪客可以關鍵字來搜尋全站內容・會以電動設備為主要介紹點(以圖片為主)・可配送及接受付款方式(以文字說明、圖片為主)商品分類頁(又名營業項目)・訪客可以檢視依據商品分類階層來檢視各個商品分類頁、商品單頁。商品介紹單頁User Story
    • sitemap
    • flow chartYes/NoYesNoYes
    • wireframe你不知道有哪些事要做
    • wireframe前無古人
    • DEMO
    • 新建機台 最新上架 熱⾨門推薦輕⼩小說書名產⽣生器 by weijenLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquamerat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut和多繽紛樂RandomLife編輯 刪除728x90 AD改編改編⾃自 輕⼩小說書名產⽣生器 by handlino結果ResultSLOT 1 SLOT 2 SLOT 3S250x250事情的真實脈絡究竟如何,像是南瑪都颱⾵風來的時候 T P F事情的真實脈絡究竟如何,像是南瑪都颱⾵風來的時候 T P F
    • 80K⽀支持100K⾨門檻⾨門檻 100K⾨門檻已達成Act1 Act2 Act3Act1 Act2 Act3Act1 Act2 Act380K⽀支持100K⾨門檻⾨門檻 100K⾨門檻已達成78%經驗值召喚術 LV25外星藍
    • Make it clickableBalsamiq Mockup
    • mockup探索可能性
    • tools• PhotoShop• Fireworks (dead product ._.)• Sketch.app (Mac only)• Pen & Paper
    • mockup探索可能性,但是不要做無用功
    • Let’s change the phrase“designing in the browser” to“deciding in the browser.”– @danmall
    • 應該避免的・做 100 種不同的陰影給客戶看・做 20 種不同的圓角框角度給老闆看・微調 1px 的間距與對齊・在 Photoshop 裡面排段落字型・...... 以上請在 prototype 做決定
    • HTML prototype測試流程、確認各種環境
    • GoalsWireframeMockup Prototype DevelopIterate
    • k
    • 最佳化Optimization
    • 合併CSS⼀一個⾴頁⾯面載⼊入時,沒有理由載⼊入超過 3 個 CSS 檔案
    • Image Sprites⼩小圖⽚片應該合併成⼀一張,⼀一次下載
    • 不要再寫CSS了
    • 請服用以下解藥LESS/Sass/Stylus
    • Sass + Compass1 .btn {2 @include border-radius(4px);3 @include box-shadow($shadow);4 color: $grayDark;5 font-size: $baseFontSize;6 line-height: $baseLineHeight;7 }8 .btn-large {9 @include border-radius(5px);10 font-size: $baseFontSize + 2px;11 }
    • Sass + Compass1 .nav {2 ...3 li {4 &.first { ... }5 ...6 a {7 &.current { }8 .ie7 & {} // hack9 }10 }11 }nav li.firstnav li a.current.ie7 nav li a
    • Sass + Compass.icon-sprite,.icon-chat,.icon-gear,.icon-group,.icon-lock,.icon-pencil,.icon-tag,.icon-user{background:url(../images/icon-saed2a53191.png) no-repeat}.icon-chat{background-position:0 -129px;height:22px;width:24px}.icon-gear{background-position:0 0;height:26px;width:26px}.icon-group{background-position:0 -46px;height:21px;width:32px}.icon-lock{background-position:0 -212px;height:24px;width:20px}.icon-pencil{background-position:0 -256px;height:23px;width:23px}.icon-tag{background-position:0 -87px;height:22px;width:22px}.icon-user{background-position:0 -171px;height:21px;width:24px}.icon-retina-sprite{background:url(../images/icon-retina-s7eb4b555e1.png) no-repeat}@media (min--moz-device-pixel-ratio:1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){.icon-all-retina-sprites,.icon-chat,.icon-gear,.icon-group,.icon-lock,.icon-pencil,.icon-tag,.icon-user{background-image:url(../images/icon-retina-s7eb4b555e1.png);-webkit-background-size:32px auto;-moz-background-size:32px auto;-o-background-size:32pxauto;background-size:32px auto}.icon-chat{background-position:0 -197px}.icon-gear{background-position:0 -31px}.icon-group{background-position:0 0}.icon-lock{background-position:0 -98px}.icon-pencil{background-position:0 -132px}.icon-tag{background-position:0 -165px}.icon-user{background-position:0-67px}}.icon{display:inline-block}.container{width:960px;margin:20px auto}
    • 製作樣式指南Style Guide
    • 合併/動態載入JS⽤用 Modernizr.load 等⽅方式動態載⼊入 JavaScript
    • COMMAND LINE INTERFACEFFFFFUUUUU!!
    • our designer uses Windows :(Press any key to continueBad News
    • Fire=+
    • GoalFire.app + Code Editor + Browser = 可以開工
    • Features• Built-in web server• Watch and compile Sass/Compass/CoffeeScript• ERB/Haml/Markdown+ Layout/Partial/Helpers like Rails• Automatic browser reloading
    • Features (cont.)• Project template• Build project into deliverables• Growl notification• Cross-platform
    • Lorem Helpers<p><%= lorem_sentence %></p><p><%= lorem_words 5 %></p><p><%= lorem_word %></p><p><%= lorem_paragraphs 10 %></p><p><%= lorem_paragraph %></p><p><%= lorem_date %></p><p><%= lorem_name %></p><p><%= lorem_first_name %></p><p><%= lorem_last_name %></p><p><%= lorem_email %></p>
    • Lorem Helpers (cont.)<p><%= zh_lorem_sentence %></p><p><%= zh_lorem_words 5 %></p><p><%= zh_lorem_word %></p><p><%= zh_lorem_paragraphs 10 %></p><p><%= zh_lorem_paragraph %></p><p><%= zh_lorem_name %></p><p><%= zh_lorem_first_name %></p><p><%= zh_lorem_last_name %></p><p><%= zh_lorem_email %></p>
    • Lorem Helpers (cont.)<p><%= zh_lorem_sentence %></p><p><%= zh_lorem_words 5 %></p><p><%= zh_lorem_word %></p><p><%= zh_lorem_paragraphs 10 %></p><p><%= zh_lorem_paragraph %></p><p><%= zh_lorem_name %></p><p><%= zh_lorem_first_name %></p><p><%= zh_lorem_last_name %></p><p><%= zh_lorem_email %></p>
    • <img src="<%= lorem_image(300x400) %>"><img src="<%=lorem_image(300x400, :background_color =>333, :color => fff) %>"><img src="<%=lorem_image(300x400, :random_color =>true) %>"><img src="<%= lorem_image(300x400, :text=> lorem_word) %>">Lorem Helpers (cont.)
    • Lorem Helpers (cont.)1 <% 10.times do |i| %>2 <div class="media">3 <a href="http://twitter.com/<%=lorem_last_name %>" class="img">4 <img src="/images/fake/avatar/<%= i%>.png”>5 </a>6 <div class="bd">7 <p><%= lorem_last_name %> <%=lorem_paragraph %></p>8 <p><%= lorem_date %></p>9 </div>10 </div>11 <% end %>
    • Lorem Helpers (cont.)1 <% 10.times do |i| %>2 <div class="media">3 <a href="http://twitter.com/<%=lorem_last_name %>" class="img">4 <img src="/images/fake/avatar/<%= i%>.png”>5 </a>6 <div class="bd">7 <p><%= lorem_last_name %> <%=lorem_paragraph %></p>8 <p><%= lorem_date %></p>9 </div>10 </div>11 <% end %>
    • GPLv2Source Code is available on GitHubhttps://github.com/handlino/FireApp
    • $14If you want to buy us some beershttp://fireapp.handlino.com/
    • Contributionsdocuments, pull requests, issueshttps://github.com/handlino/FireApp
    • Fire.app workshop規劃中
    • • 制訂預期目標 business goals• 說故事 figure out user goals• 框架圖 wireframe• 模型 Mockup• 雛型設計 HTML prototype• 迭代開發 Iteration• 最佳化 Optimization• 下一回合 Again
    • 創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://iamhlb.com」。