UI Design Experience


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UI Design Experience

  1. 1. Ux Johnson’s UI Design Experience 2004 - 2012
  2. 2. Not About Johnson Wang a product managerArt skilled with software engineering for 10 years, Experienced in desktop, web, mobile,Design of user interface is all about flash gameexperience. Looking good or fancy is Knowing your business. progremming and In order to understand how the user interface design.not important. think, designer need to get more idea of how your business works. Their Currently working onUI is how we help user to operate new startup of mobile primary knowledge, culture, age, lifethe system, a bridge between system commerce solutions. style, working environment and whatfunctionality and humanity. Most solution you’re providing.people thinks that the best UI designis a interface that everyone canoperate it well. For consumer Forget aboutproduct, that’s true, but not for Engineer’s Layoutprofessional products. Normally, engineer implements their own layout to test if all function workFor professional products, UI shows a correctly. So the primary target ofclear way to help user learn how to those interface design is for testing.operate the system for basic and It’s about running through all stepsimportant functions. And provide and check if some error occurs. Andsome advance way for experienced your user doesn’t care about that.user to operate with efficiency way. They should focus on what they’re solving with your application.To design user interface, we need todo more than Art. Application software is a tool for helping user to solve their problem, they should never aware of the software’s existence. We never design under engineer’s layout, cause we know better about how user needs then they do.
  3. 3. Win AppNVR Application for Home Surveillance D-Link 2010Live View
  4. 4. Win AppNVR Application for Home Surveillance D-Link 2010 Selected channel Event Notification | Channel Name | Motion Detect AreaLive View Sound ON/OFF | Enlarge Selected Channel Fullscreen Layouts Setup Playback Live Channel List Timebar Channel List Swipe timebar to shift Zoom Out | In Swipe vertically to back to instant Event Indicator show more channels. playback Focus Out | In Click for event detaiil. PTZ Controller Quick Tag Drag dot at center or snapshot & bookmark click any poit of ring. Pager Present Time Indicator Navigates between each pages Indicates the current time shows with current layout. on video. Will be always current actual time while viewing live.
  5. 5. Win AppNVR Application for Home Surveillance D-Link 2010 Selected channel Event Notification | Channel Name | Motion Detect AreaPlayback Sound ON/OFF | Enlarge Selected Channel Fullscreen Layouts Setup Playback Live Play Button Single Click to switch between play forward and pause. Channel List Drag Left or Right to Play backward or forward. Timebar Channel List Event Last | Next Swipe timebar to shift Swipe vertically to back to instant Event Indicator show more channels. playback Speed Up | Down Click for event detaiil. Event Last Play Forward Play Quick Tag Backward Rotate to change snapshot & bookmark playback speed Pager Present Time Indicator Event Next Open Smart Search Dialog Navigates between each pages Indicates the current time shows with current layout. on video. Will be always current actual time while viewing live.
  6. 6. iPhone AppVuExpro App for Mobile Surveillance D-Link 2010Remote Live View Connections Quick Add Camera Enter host address directly and hit “+” button to connect to device automatically. Hit “+” without entering any address will bring up a search dialog. Edit Live Video List Swipe the edit button from left to right to switch to “EDIT MODE” for remove or re-arrange existed connections. It makes no sense to ask user to determine which device he bought, which resolution, connection speed, port, video encode type he need to connect to camera. In most case, a simple IP address or URL is acceptable, but maybe a device id printed on device is better. Just like google search, User can input anything he knows, and the app search any available for them. If user input nothing, then bring up a search dialog to search all near by devices.
  7. 7. iPhone AppVuExpro App for Mobile Surveillance D-Link 2010Connection List Connections Predefined Group Icon User may select an icon for grouping HOME devices or channels. HOME GARAGE OFFICE Quick SnapViewer User can bookmark some connection at front list, which shows the newest frame while first log-in. Living Room 22:40 Home This feature help user to quick navigate to some major channel immediately. When connecting to a nvr or any device which has more than one channel, user may swipe the thumbnail at left to navigate between channels. My Seat 22:40 Office Other Videos... Notification Manager Turn to bring up notification manager which list all events and notifications from devices. 3 remainding issues.
  8. 8. iPhone AppVuExpro App for Mobile Surveillance D-Link 2010Live View / Playback Snapshot & Save to Photo Album Snapshot & Mail Device Commands Swipe Between Channels PTZ Operations shows when device support ptz Instant Playback By Dragging the Time Track Time Track shows when device support track playback
  9. 9. iPad AppVuExproConnection List / Live View Master View (Left) lists stored profiles. Detail View (Right) shows the live video of selected profile. Click Add buton to add new profile. While the profile list is empty, the UI shows a simple connection panel instead. List 9 videos in a page. Swipe to navigate between pages.
  10. 10. iPad AppVuExproLive View / Playback All Controllers are invisible by default. Touch Move left-Bottom Edge to Control Pan-Tilt. Touch Move Right-Bottom Edige to Control Zoom Click anywhere of View to show dynamic buttons. Including: Back to NVR Console View Show Preset Panel Snapshot & Mail Show Action Menu DIO Controlls and etc. Snapshot Swipe with three fingers to next / previous channel. Pinch for Digital Zoom. Playback Drag from left to right at bottom to start playback. Drag to end of time bar to switch back to live view. Double Tap Left to begin Navigate Backward. Double Tap Right to begin Navigate Forward. Shake to switch back to live view. Click Plus to Add Preset
  11. 11. iPhone AppFamilyMartPre Order from Remote
  12. 12. iPhone AppFamilyMartPre Order from Remote 菜單頁面 首次進入時將帶至菜單頁面。 如有廣告圖,則自動顯示。 時段選擇 進入菜單頁面時,將自動根據 目前時間跳至相應時段。使用 者會看到滑動效果。故使用者 各時段限制時間 可以藉此知道如何切換時段。 限制時間於選取時方顯示,由 於App⼀一開始會自動選好時段, 商品架 因此使用者不至於因為看不到 商品架中陳列該時段所有商 其他時間限制而有困擾。 品。商品圖需用去背的PNG格 式圖片。 字體部分 目前最小字體與iPhone桌面顯 瀏覽商品 示的字體⼀一樣尺寸,在實機上 上下拖動畫面可瀏覽商品。 是看得很清楚的,所以可以不 用擔心字體問題。 增加商品(及移除) 點商品照片則加點至購物籃, 當商品數量大於零時,右上角 會出現「減號」按鈕,每按⼀一 下從購物籃刪除⼀一個商品。若 需全部刪除,可在購物籃中操 作。
  13. 13. iPhone AppFamilyMartMenu Page 菜單頁面 未選取狀態 商品狀態 商品狀態包括以下三種 1. 未選取 ⼀一般剛進入菜單時,商品顯示為未 選取狀態。未選取時,商品照片才 已選取狀態 是使用者關注的重點,因此數量跟 刪除鈕都不需要顯示。 2. 已選取 選取後代表使用者已經清楚該品項 為何,因此重點在于點選與否,及 所選數量。另外,此時刪除鈕有作 不供應狀態 用,故顯示。 3. 暫不供應 當時段不允許,或主機回傳之庫存 量為零時,則顯示為暫不供應。 購物籃 結帳按鈕 當購物籃內有商品時,右上角購物 購物籃有商品時,確認送單鈕會亮 籃圖式上方會顯示購物籃內商品數 起。代表此時可以發送訂單。 量。點選該圖示可檢視購物籃內的 商品。 (見次頁說明)
  14. 14. iPhone AppFamilyMartShopcart Page 購物籃 購物籃內顯示目前已經選取的 商品,⼀一方面統計價格,⼀一方 面也可以調整所購商品數量。 商品金額顯示 金額部分,當數量大於⼀一時, 顯示單價 x 數量 = 小計。 而當數量僅為⼀一時,則只顯示 單價即可。 商品數量調整 數量調整可使用加、減按鈕來 調整,或者在名稱上水平滑動 手指,則會產生「刪除」扭供 使用者直接刪除。 結帳按鈕 結帳按鈕設計成隨時都可以按, 此操作模式是 iPhone 慣用模 這樣可以固定結帳按鈕的位置, 式,因此對於原來就熟的使用 除了好找以外,對於熟練的使用 者並非問題。至於不曉得這個 者而言,更容易單手完成訂餐。 功能的使用者,能可透過加減 按鈕來調整。
  15. 15. iPhone AppFamilyMartOrder Confirm Page 取餐時段 App 會預設自動選取離目前最 近的時段,而使用者仍可點選 時間進行修改。點選後下方會 出現如上圖調整時間的畫面供 使用者設定。 此處的取餐時段設定,是使用 訂單確認頁 者期待的時間,但經過伺服器 訂單確認頁功能主要是要協助 驗證後,最後時間可能會比該 使用者確定訂單內容、總金額 時間晚。 以及取餐時段。 刪除 正在傳送訂單 與訂餐伺服器連線中, 請稍候片刻... 送出訂單 點選送出訂單後直接送出,此 處需要等數秒等候伺服器傳輸 及作業時間。
  16. 16. iPhone AppFamilyMart 發生錯誤Order Detail Page 由於現場材料不足,因此無 法接受訂單,敬請見諒。 確認 正在傳送訂單 與訂餐伺服器連線中, 發生錯誤時 錯誤時直接顯示伺服器回傳的 訂購通知 請稍候片刻... 錯誤訊息。 無論訂購成功或失敗,接會收 到通知。成功時顯示訂單資料 及QRCode,以利結賬時確認 用。失敗時則會跳出顯示伺服 器回傳的錯誤訊息。 刪除
  17. 17. 滑動切換店家可更換業者形象圖指定店名及附帶資訊搜尋功能找分店或其他 會員卡數量 點選進行兌換點數
  18. 18. 滑動切換店家
  19. 19. 店家 Banner 可更換 滑動打開工具列名稱在網站上設定 點擊此處打開工具列
  20. 20. 點這邊掃條碼
  21. 21. 滑動看還可以換什麼目前商品進度顯示點數資訊 即滿可點此兌換
  22. 22. Windows 8 AppInterViewerMain Page ·• 預設底部是地圖,直接取得目前 座標位置。 ·• 地圖的正中間有一個 + 按鈕,點 下立即新增新的InterView。如果 要新增在其他地點,則托動地 圖,讓 + 上方的箭頭指到指定的 地方後再按即可。 ·• 地圖上附近若有之前紀錄,以紅 框白字顯示,上方數字為更新次 數。 ·• 地圖上可直接書寫。 ·• 操作介面往右邊延伸,由右往左 滑動可以檢視各種不同排序尋得 的InterView。 ·• 篩選條件分別為, Recent, Contacts, Tags。 ·• 篩選方塊磚內容已選定的圖片或 文件顯示,未指定者則以文字顯 示。文字部分顯示受訪者,時間 跟地點等資訊。
  23. 23. Windows 8 AppInterViewerSlides Page ·• 點選畫面上的 + 號快速新增。 ·• 點一下時 + 往左移動,右邊多出 輸入區,並帶出鍵盤。此時點 + 則會在建立一個新的InterView後 停留在原處。而按下 Play 鈕則 是跳入下頁。 ·• 當出現輸入區時,可輸入任意資 料當作名字,通常是客戶的電 話,因此預設會顯示數字鍵盤。 可不輸入直接建立。
  24. 24. Windows 8 AppInterViewerSlides Page ·• 左側白色條為快速工具箱,內容 包含: ◦ 加註解 可增加文件註解,用來顯 示於方塊磚中,或者增加 Sticky Note到文件中。 ◦ 設定提醒 可設定與文件相關的提 醒,提醒可根據時間或地 點來判斷顯示時機。 ◦ 加Tag 可將文件標記為重要文 件,或增加搜尋標籤。 ◦ 錄音 點選後直接錄音。 ◦ 拍照 拍攝照片並貼到文件上。 ◦ 書寫 啟用後可直接在文件上書 寫。 ·• 瀏覽文件的下一頁是用滑動的方 式。 ·• 左側應該再增加載入文件的按 鈕,載入時從文件目前的位置往 後面加。 ·•
  25. 25. Windows AppiSap NVRLive View
  26. 26. Windows AppiSap NVRSetup
  27. 27. Windows AppiSap NVRSkin: Dark Knight
  28. 28. Windows AppiSap NVRSkin: Snow
  29. 29. Windows AppiSap NVRSkin: Ferrari
  30. 30. Web AppACTi NVRLive View
  31. 31. Web AppACTi NVRTrack View
  32. 32. EZ-WATCHING CO., LTD.