狠狠撸

Ux Johnson’s
UI Design Experience
2004 - 2012

Not About Johnson Wang
a product manager

Art
skilled with software
engineering for 10
years, Experienced in
desktop, web, mobile,
Design of user interface is all about ?ash game
experience. 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 on
UI is how we help user to operate new startup of mobile
primary knowledge, culture, age, life
the system, a bridge between system commerce solutions.
style, working environment and what
functionality and humanity. Most
solution you’re providing.
people thinks that the best UI design
is a interface that everyone can
operate it well. For consumer Forget about
product, that’s true, but not for Engineer’s Layout
professional products. Normally, engineer implements their
own layout to test if all function work
For professional products, UI shows a correctly. So the primary target of
clear 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 steps
important functions. And provide and check if some error occurs. And
some advance way for experienced your user doesn’t care about that.
user to operate with ef?ciency way. They should focus on what they’re
solving with your application.
To design user interface, we need to
do 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.

Win App

NVR Application for
Home Surveillance
D-Link 2010
Live View

Win App

NVR Application for
Home Surveillance
D-Link 2010
Selected channel
Event Noti?cation | Channel Name | Motion Detect Area
Live 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.

Win App

NVR Application for
Home Surveillance
D-Link 2010
Selected channel
Event Noti?cation | Channel Name | Motion Detect Area
Playback 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.

iPhone App

VuExpro App for
Mobile Surveillance
D-Link 2010
Remote 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.

iPhone App

VuExpro App for
Mobile Surveillance
D-Link 2010
Connection List Connections

Prede?ned 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 ?rst
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 Of?ce

Other Videos...
Noti?cation Manager
Turn to bring up noti?cation manager which
list all events and noti?cations from devices. 3 remainding issues.

iPhone App

VuExpro App for
Mobile Surveillance
D-Link 2010
Live 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

iPad App

VuExpro
Connection 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.

iPad App

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

iPhone App

FamilyMart
Pre Order from Remote

iPhone App

FamilyMart
Pre Order from Remote

菜單頁面
首次進入時將帶至菜單頁面。
如有廣告圖，則自動顯示。

時段選擇
進入菜單頁面時，將自動根據
目前時間跳至相應時段。使用
者會看到滑動效果。故使用者各時段限制時間
可以藉此知道如何切換時段。限制時間於選取時方顯示，由
於App?一開始會自動選好時段，
商品架因此使用者不至於因為看不到
商品架中陳列該時段所有商其他時間限制而有困擾。
品。商品圖需用去背的PNG格
式圖片。字體部分
目前最小字體與iPhone桌面顯
瀏覽商品示的字體?一樣尺寸，在實機上
上下拖動畫面可瀏覽商品。是看得很清楚的，所以可以不
用擔心字體問題。
增加商品（及移除）
點商品照片則加點至購物籃，
當商品數量大於零時，右上角
會出現「減號」按鈕，每按?一
下從購物籃刪除?一個商品。若
需全部刪除，可在購物籃中操
作。

iPhone App

FamilyMart
Menu Page

菜單頁面未選取狀態

商品狀態
商品狀態包括以下三種

1. 未選取
?一般剛進入菜單時，商品顯示為未
選取狀態。未選取時，商品照片才已選取狀態
是使用者關注的重點，因此數量跟
刪除鈕都不需要顯示。

2. 已選取
選取後代表使用者已經清楚該品項
為何，因此重點在于點選與否，及
所選數量。另外，此時刪除鈕有作不供應狀態
用，故顯示。

3. 暫不供應
當時段不允許，或主機回傳之庫存
量為零時，則顯示為暫不供應。

購物籃結帳按鈕
當購物籃內有商品時，右上角購物購物籃有商品時，確認送單鈕會亮
籃圖式上方會顯示購物籃內商品數起。代表此時可以發送訂單。
量。點選該圖示可檢視購物籃內的
商品。

（見次頁說明）

iPhone App

FamilyMart
Shopcart Page

購物籃
購物籃內顯示目前已經選取的
商品，?一方面統計價格，?一方
面也可以調整所購商品數量。

商品金額顯示
金額部分，當數量大於?一時，
顯示單價 x 數量 = 小計。

而當數量僅為?一時，則只顯示
單價即可。

商品數量調整
數量調整可使用加、減按鈕來
調整，或者在名稱上水平滑動
手指，則會產生「刪除」扭供
使用者直接刪除。結帳按鈕
結帳按鈕設計成隨時都可以按，
此操作模式是 iPhone 慣用模這樣可以固定結帳按鈕的位置，
式，因此對於原來就熟的使用除了好找以外，對於熟練的使用
者並非問題。至於不曉得這個者而言，更容易單手完成訂餐。
功能的使用者，能可透過加減
按鈕來調整。

iPhone App

FamilyMart
Order Con?rm Page

取餐時段
App 會預設自動選取離目前最
近的時段，而使用者仍可點選
時間進行修改。點選後下方會
出現如上圖調整時間的畫面供
使用者設定。

此處的取餐時段設定，是使用
訂單確認頁者期待的時間，但經過伺服器
訂單確認頁功能主要是要協助
驗證後，最後時間可能會比該
使用者確定訂單內容、總金額
時間晚。
以及取餐時段。

刪除
正在傳送訂單
與訂餐伺服器連線中，
請稍候片刻...

送出訂單
點選送出訂單後直接送出，此
處需要等數秒等候伺服器傳輸
及作業時間。

iPhone App

FamilyMart 發生錯誤
Order Detail Page 由於現場材料不足，因此無
法接受訂單，敬請見諒。

確認

正在傳送訂單
與訂餐伺服器連線中，發生錯誤時
錯誤時直接顯示伺服器回傳的
訂購通知請稍候片刻... 錯誤訊息。
無論訂購成功或失敗，接會收
到通知。成功時顯示訂單資料
及QRCode，以利結賬時確認
用。失敗時則會跳出顯示伺服
器回傳的錯誤訊息。

刪除

滑动切换店家

可更換業者形象圖

指定店名及附帶資訊

搜尋功能找分店或其他

會員卡數量点选进行兑换点数

店家 Banner 可更換

滑動打開工具列
名稱在網站上設定

點擊此處打開工具列

滑動看還可以換什麼

目前商品進度

顯示點數資訊即满可点此兑换

Windows 8 App

InterViewer
Main Page

·? 預設底部是地圖，直接取得目前
座標位置。
·? 地圖的正中間有一個 + 按鈕，點
下立即新增新的InterView。如果
要新增在其他地點，則托動地
圖，讓 + 上方的箭頭指到指定的
地方後再按即可。
·? 地圖上附近若有之前紀錄，以紅
框白字顯示，上方數字為更新次
數。
·? 地圖上可直接書寫。
·? 操作介面往右邊延伸，由右往左
滑動可以檢視各種不同排序尋得
的InterView。
·? 篩選條件分別為, Recent, Contacts,
Tags。
·? 篩選方塊磚內容已選定的圖片或
文件顯示，未指定者則以文字顯
示。文字部分顯示受訪者，時間
跟地點等資訊。

Windows 8 App

InterViewer
狠狠撸s Page

·? 點選畫面上的 + 號快速新增。
·? 點一下時 + 往左移動，右邊多出
輸入區，並帶出鍵盤。此時點 +
則會在建立一個新的InterView後
停留在原處。而按下 Play 鈕則
是跳入下頁。
·? 當出現輸入區時，可輸入任意資
料當作名字，通常是客戶的電
話，因此預設會顯示數字鍵盤。
可不輸入直接建立。

Windows 8 App

InterViewer
狠狠撸s Page

·? 左側白色條為快速工具箱，內容
包含:
? 加註解
可增加文件註解，用來顯
示於方塊磚中，或者增加
Sticky Note到文件中。
? 設定提醒
可設定與文件相關的提
醒，提醒可根據時間或地
點來判斷顯示時機。
? 加Tag
可將文件標記為重要文
件，或增加搜尋標籤。
? 錄音
點選後直接錄音。
? 拍照
拍攝照片並貼到文件上。
? 書寫
啟用後可直接在文件上書
寫。
·? 瀏覽文件的下一頁是用滑動的方
式。
·? 左側應該再增加載入文件的按
鈕，載入時從文件目前的位置往
後面加。
·?

Windows App

iSap NVR
Live View

Windows App

iSap NVR
Skin: Dark Knight

Windows App

iSap NVR
Skin: Snow

Windows App

iSap NVR
Skin: Ferrari

狠狠撸

UI Design Experience

More Related Content

Similar to UI Design Experience (20)

More from Johnson Wang (12)

UI Design Experience