'interface'에 해당되는 글 2건

  1. 2010.06.24 iPhone Human Interface Guidelines
  2. 2010.06.21 [펌] Xcode 3 둘러보기(2) - Interface Builder
아이폰어플개발정보2010. 6. 24. 14:13
iPhone Human Interface Guidelines

** Planning **

Ch1. The iPhone OS Platform: Rich with Possibilities

** platform differences to keep in mind **

- compact screen size (480x320)

- memory is not unlimited

- one screen at a time

- one application at a time (positiveapplication-switchingexperience <- shortest possible launch time)

- minimal user help

** options **

- iPhone Applications: responsiveness, simplicity, and a beautiful,  streamlined user interface

- Web-only Content: web applications, optimized /compatible pages

- Hybrid Applications: avoid giving users the impression that your application is merely a miniweb browser

** questions **

- user's motivation

- user's experience

- focus of application

- natural organization of the information

** 3 styles of applications **

- productivity applications: ex) mail. focused on information. settings application.

- utility applications: ex) weather. quick summary of information. options on the back of the main view.

- immersive applications: ex) game. full-screen, visually rich environment. focus is one the visual content and the user experience not on the data. non-standard controls.

Ch2. Human Interface Principles: Creating a Great User Interface

** Principles **

- Metaphors in the real world

- Direct manipulation of tangible object

- See and point by presenting choices to users

- immediate feedback

Ch3. Designing an iPhone Application: From Product Definition to Branding

1. Create Product Definition Statement

 : main purpose and its audience

ex) “Aneasy-to-usephotomanagementapplicationforamateurphotographers“

2. Incorporate Characteristics of Great iPhone Applications

- Make it obvious

- Think Top Down (top is most visible)

- Minimize required input

- Express information succinctly

- Provide fingertip-sized targets (recommend hit region 44x44 pixels)

- Focus on primary task

3. Support Gestures Appropriately

- Finger: capable of many movements, but bigger than a mouse pointer

- users are most familiar with the tap and drag.

- pinch and swipe are used as shortcuts to expedite a task,  not as the only way to perform a task.

-There should always be  a simple,straightforward way to perform an action,even if it means an extra tap or two.

Tap: To press or select a controlor item (single mouse click).

Drag: To scrollor pan.

Flick: To scrollor pan quickly.

Swipe:In a table-view row,to revealthe Delete button.

Double tap: To zoom in and center a block of content or an image.To zoom out (if already zoomed in).

Pinch open: To zoom in.

Pinch close:To zoom out.

Touch and hold: In editable text,to display a magnified view for cursor positioning.  

4. Incorporate Branding Elements Cautiously

Brandingismosteffectivewhenitissubtleandunderstated except Home screen icon.

Users just want to get things done.

Ch4. Handling Common Tasks

** Starting **

- avoid About window or splash screen

** Stopping **

-Be prepared to receive an exit or terminate notification at any time.Therefore,save user data as soonas possible and as often as reasonable.


iPhoneapplicationsshould never quit programmatically becausedoingsolookslikeacrashtotheuser.

Whenuserscan'taccesspartofyourapplicationbecause ofexternalcircumstances:


-Supply a button that performs a corrective action

-Avoid displaying the alert too often or in too many different situations

"Configuration options" vs "Settings application"

** Handling Orientation Changes **

- Be aware of accelerometer values

- no “rotate now” button

** Using Sound **


* What Users Expect - Ring/Silent switch

- Users don't want to be interrupted by ringtone/SMS, keyboard or feedback sounds

- Users want to hear media playback of media-only app., Clock alarm, sound clip in a language-learning app. or conversation in an audio chat app.

* What Users Expect - Volume Buttons



* What Users Expect - Headsets and Headphones

- Whenuserspluginaheadsetorheadphones,theyintendtocontinuelisteningtothecurrentaudio privately.

- Whenusersunplugaheadsetorheadphones,theydon’twanttoautomaticallysharewhatthey’vebeenlisteningtowithothers.

* System Sound Services

-30 seconds or less in duration

-no levelor positioning control

-Can always mix with other sounds

-Should always obey the Ring/Silent switch

* Audio Session Services

- Audio sounds are primary part of the app.

-30 seconds or more in duration

-levelor positioning control

-Should not mix with other sounds

For allapplications,only one category is active at a time.

* Audio Session categories

- UserInterfaceSoundEffects (Ring/Silent, Mix): Tap feedback, startup sounds

- AmbientSound (Ring/Silent, Mix): Incidental sounds and noises

- SoloAmbientSound (Default, Ring/Silent): A sound track in a game

- MediaPlayback: Songs, videos, streaming audio

- LiveAudio: Music or other real-time, user-created sounds

- RecordAudio: User-recorded audio

- PlayAndRecord: Simultaneous audio input and output, such as in a voice-changing app.

* Providing a License Agreement

The end-user license agreement for an iPhone application is displayed in the App Store.

You should not provideany user interface elements that display the license agreement while your application is running.

** Designing **

- Views: content regions

- Controls: graphic action objects

- Screens: different visual states

Ch5. A Brief Tour of the Application User Interface


* 4 special views

- Status bar

- Navigation bar

- Tab bar / Toolbar

Ch6. Navigation Bars, Tab Bars, Toolbars, and the Status Bar

* Status Bar

- gray

- opaque black

- translucent black (alpha = 0.5)

* Navigation Bar

- Navigational control

 : multi-segment (breadcrumb )back button is not recommended

- Manage the content

 : switch among different modes

 :Allcontrols in a navigation bar should use the bordered style.

* Toolbars

 : actions related to objects in the current view

 : five or fewer items are reasonable

* Tab Bars

 : Different perspectives on the same set of data

 : Different subtasks related to the overall function of the app.

 : If your application's tab bar contains five or fewer tabs,iPhone OS displays all of them,equally spaced withinthe tab bar. If there are more than five tabs,iPhone OS displays four of them in the tab bar andadds a More tab.

 : TheMorescreencanalsoincludeanEditbuttonthatuserscantaptoconfigurethetabbar.

 : You can display a badge (white text inside a red oval) on a tab.

Ch7. Alerts, action Sheets, and Modal Views

Alerts,action sheets,and modalviews are allmodal,which means that users must explicitly dismiss them.

it’s important to avoid overusing these views. (interrupting, annoying)

- Alerts: unexpected important information (unattached appearance)

 : If users press theHome button while such an alert is visible,the result should be identicalto tapping the Cancelbutton.

 : If the action is benign, OK is bright-coloured and on the right side.

 : If the action is destructive, Cancel is bright-coloured and on the right side.

- Action sheets: collection of additional choices related to the action, anchored to the sides of the screen

 : background - blue (default), black translucent

 : Allactionsheetsinyourapplicationshouldhavethesamebackgroundcolor,andthatcolorshouldcoordinatewiththecolorofthenavigationbarsandtoolbars.

 : destructive button should be at the top (away from Home button) and in red color

 : Cancel button is at the bottom and dark

- Modal views: extensive functionality

 ex) Compose view in Mail. When users tap the Compose button, a modal view appears that contains text areas for the addresses and message, a keyboard for input, a Cancel, and a Send button.

Ch8. Table Views, Text Views, and Web Views


+ regular style (optional index)

 : Avoid using table elements that display on the right edge of a table.

 - simple list 

 - sectioned list

+ grouped style (no index)

 :  each group always contains at least one item.

You should never make highlight permanent in an effort to indicate the current selection in a list; instead, use the checkmark.

* Table-View Elements

- Disclosure indicator: selecting the row results in the display of another list. selection only

- Detail disclosure button: reveals detailed information for the item

- Delete button: appears when users swipe in the row or when they tap the delete control button while in an editing context

- Delete control button: (horizontal minus symbol) reveal and (vertical) hide the Delete button for each list item

 - grouped table view: outside the table view, on the left

 - regular table view: in the table view, on the left

- Row insert button: add a row to the list

- Check mark: shows that it is currently selected, on the right

Ch9. Application Controls

- Activity indicator: progress of a task of unknown duration

- Progress View: for known duration

- Date and Time Picker: size is fixed the same as that of keyboard

- Info Button: reveal configuration details about an app. (light/dark background)

- Label: gives information or limited help

- Page Indicator: shows how many views are open which are peers of each other. at most 20 dots in portrait orientation. You should include a logic to prevent clipping.

- Progress View: default / bar style

- Rounded Rectangle Button

- Search Bar: default / opaque black / translucent black

- Segmented Control: display a different view. ~5 seg.s recommended. text or image but not both.

- Slider: users make fine-grained adjustment to a value

- Text Field: single line of input

Ch10. System-Provided Buttons and Icons

** Avoid choosing a button based on its appearance but its documented meaning **

* Standard buttons for Toolbars and Navigation Bars (UIBarButtonSystemItem)

 - Bordered style: for navigation bar and toolbar

 - Plain style: for toolbar

* Standard Icons for Tab Bars (UITabBarSystemItem)

Ch11. Creating Custom Icons and Images

- PNG format

- white with appropriate alpha and no shadow

- anti-aliasing

- 20x20 for toolbar / navigation bar

- 30x30 for tab bar

- icon is used as a mask (no need for colorful icon)

- pressed / selected appearance are automatically provided

출처 : http://blog.naver.com/PostView.nhn?blogId=gonagi&logNo=150048150981
Posted by 오늘마감

댓글을 달아 주세요

XCODE2010. 6. 21. 09:28
[펌] Xcode 3 둘러보기(2) - Interface Builder
출처 - http://www.cocoadev.co.kr/168

이번 포스팅에서는 인터페이스 빌더 3.1을 둘러 보겠습니다. 역시나 이전 Xcode 둘러보기와 같이 두서없고 깊이 없이 둘러만 보겠습니다.

1. XIB 파일
처음 Xcoe3.1을 실행하고 당황스러운 부분은 더블클릭해서 인터페이스 빌더를 실행해야 할 nib 파일이 없어졌다는 것입니다.

그대신 Resources 그룹을 보면 MainMenu.xib가 새로 추가되어 있습니다. 이 MainMenu.xib를 더블클릭 하면 이전과 같이 인터페이스 빌더가 실행됩니다.

아래는 텍스트 에디터에서 열어본 *.xib 파일의 내용입니다.

요즘 많은 툴들에서 사용하는 XML 포맷으로 되어 있지만, 애플에서는 절대 직접 수정하지 말라고 권하고 있습니다. xib 파일은 기본 3,305 라인이기 때문에 그다지 수정할 생각은 들지 않습니다. xib 파일은 아마 윈도우의 rc 파일의 역활을 하는 것 같습니다.

nib 파일은 Xcode에서는 찾을 수 없지만(하위 호환을 위해서 NIB Files 그룹이 존재 하는 것 같습니다) 빌드 후에는 패키지내에 포함됩니다.

2. XIB 윈도우
2.5 버젼과는 달리 Instance, Classes, Images, Sounds, Nib등의 탭이 없어지고, 이전의 Instance에 해당되는 부분만 있습니다. Application과 Font Manager가 추가되었습니다.

3. 라이브러리 윈도우

이 전의 팔레트가 라이브러리 윈도우로 변경되었습니다. 이제 UI 컨트롤, 인스턴스를 추가하는 작업에 라이브러리 윈도우를 사용합니다. 이전과 같이 NIB 윈도우에서 Classes 탭을 이용하여 subclass를 추가할 수는 없는 것 같습니다. 하지만 인스턴스를 클래스(파일)로 만드는 것은 여전히 가능합니다. 아래가 라이브러리 윈도우 입니다.

Cocoa 어플리케이션에서 사용하는 오브젝트와 컨트롤들은 Cocoa 그룹 하단에 다시 세부로 분류되어 잘 정리 되어 있습니다. 지금은 용도를 알수 없는 아이템들이 많고 이전과 비교하여 추가된 부분이 많기 되었기 때문에 기회가 되면 따로 각 아이템의 용도를 공부한 후에 설명해야 될 것 같습니다.

아직 각 아이템들의 명칭을 잘 몰라서 라이브러리 윈도우에서 우클릭을 하면 나오는 보기 옵션에서 'View Icons And Lables'를 선택하여 이름도 같이 볼 수 있도록 선택해 놓았습니다.

4. AppController 인스턴스 생성
우선 AppController 인스턴스와 클래스 파일을 만들어 보겠습니다. 라이브러리 윈도우에서 Cocoa/Objecrts & Controllers(/Controllers) 에서 Object 아이템을 드래그해서 아래와 같이 xib 도큐멘트 윈도우로 가져다 놓습니다.
새로 만들어진 Object가 선택된 상태에서 Shift+Command+i를 클릭하여 인스펙트 윈도우를 오픈합니다. 아래와 같이 Identity 항목을 선택한 다음 Class에 AppController를 입력합니다. 그리고 Action과 Outlet 하단의 [+] 버튼을 클릭하여 아래와 같이 changeTextLabel과 textLabel, userInput을 각각 추가하였습니다.

5. Outlet, Action 연결
라 이브러리 윈도우에서 Label, TextField, Push Button을 윈도우로 드래그 해서 아래와 같이 배치하였습니다.
연결은 오브젝트를 컨트롤 키와 함께 클릭하여 연결될 오브젝트로 드래그 하는 이전과 동일한 방법도 가능합니다. 이전과 다른 점은 인스펙터의 연결창이 오픈되는 것이 아니라 아래와 같이 연결될 Action 또는 Outlet의 목록만 출력됩니다.

인 터페이스 빌더 3에서는 더욱 편리한 방법이 있습니다. xib 도큐먼트 윈도우에서 AppController에 마우스 우클릭을 하면 아래와 같이 연결 판넬이 오픈됩니다.

textLabel의 우측에 원모양의 아이콘을 드래그 하여 Label에 연결합니다. 동일한 방법으로 userInput을 텍스트필드에 연결하고 Received Action의 changeTextLabel을 Set 버튼에 연결합니다.

모두 연결된 모습입니다. 해당 항목 앞의 x 아이콘을 클릭하면 연결이 삭제됩니다.

인스펙트 윈도우의 연결 항목에서도 현재 상태를 확인할 수 있습니다. 또한 이곳에서도 해당 아이템 우측의 원모양 아이콘을 드래그하여 해당 오브젝트와 연결 또는 x를 클릭하여 삭제 할 수 있습니다.

6. 소스코드와 연결
1) 클래스 파일 생성
이제 AppController 인스턴스의 클래스 파일을 만들어 보겠습니다. AppController 인스턴스를 선택한 상태에서 인터페이스 빌더 메뉴의 File/Write Class Files...을 클릭합니다. 아래의 창이 뜨면 Save 버튼을 클릭하여 저장합니다.
생 성된 파일의 프로젝트에 포함시키기 위하여 체크를 하고 Add 버튼을 클릭합니다.
2) 슈퍼클래스 지정
Xcode에서 보면 AppController 클래스 파일을 확인할 수 있습니다. 인터페이스 빌더에서 위와 같이 생성한 클래스들은 헤더파일에서 슈퍼클래스를 지정해 주어야 합니다. 오랜지 색으로 되어 있는 부분을 NSObject로 변경하고 저장합니다.

#import <Cocoa/Cocoa.h>

@interface AppController : /* Specify a superclass (eg: NSObject or NSView) */ {
    IBOutlet NSTextField *textLabel;
    IBOutlet NSTextField *userInput;
- (IBAction)changeTextLabel:(id)sender;

3) 코드와 동기화
이제 인스펙터에서 다시 확인하면 아래의 붉은색 사각형 부분과 같이 AppController.h라 바가 생겨 Xcode의 AppController 클래스와 연결되어 있음을 알려줍니다.

이전에는 소스코드에 변경사항이 생기면 Xcode에서 해당 클래스의 헤더파일을 드래그 하여 인터페이스 빌더의 nib 도큐먼트로 드랍 해서 변경사항을 적용시켜 주어야 했습니다. 하지만 이제는 Xcode에서 소스코드에 변경사항이 생기고 저장이 되면 인터페이스 빌더에 바로 반영이 되어 매우 편리합니다.

Xcode에서 미리 클래스 파일을 만들어 놓고 인터페이스 빌더에서 해당 클래스를 선택하는 것도 가능합니다.

AppContorller 의 인스펙터에서 새롭게 Outlet을 추가해 보았습니다.

위와 같이 AppController.h의 상단에 MainMenu.xib 바 밑에 추가되기 때문에, 헤더파일에 반영이 되지 않은 것을 쉽게 확인할 수 있습니다. 소스코드에서 아래와 같이 myOutlet1을 추가한 후에 저장해 보았습니다.

#import <Cocoa/Cocoa.h>

@interface AppController : NSObject {
    IBOutlet NSTextField *textLabel;
    IBOutlet NSTextField *userInput;
    IBOutlet NSTextField *myOutlet1;
- (IBAction)changeTextLabel:(id)sender;

다시 인터페이스 빌더의 AppController의 인스펙터에서 확인하면 좌측과 같이 변경된 사항이 자동으로 반영되어 있습니다.

7. 기타
1) Effect
눈에 뛰는 것은 인스펙터에 'Effect' 항목이 추가되었다는 것입니다. 코어에니메이션을 이용하여 사용자 UI에 화려한 효과를 주는 것으로 보입니다. 아래는 효과를 선택하는 화면이며,  보시는 바와 같이 다양한 효과가 있습니다. 재미있는 것이 많을 것 같은데 몇가지만 확인해 보았습니다.

코어에니메이션을 사용하기 위해서는 Content View를 체크해야 합니다. Context Filters에서 Color Invert와 Gaussian Blur 필터를 추가해 보았습니다.

* Color Invert + Gaussian Blur 필터 적용

* Color Invert 필터 적용

2) 크기조절과 정렬
윈도우 확대시에 컨트롤들의 위치와 크기를 조절하는 부분을 움직이는 gif로 만들어 보았습니다. (실제로는 훨씬 부드럽습니다)

하 얀색으로 된 부분이 윈도우고 붉은색이 해당 콘트롤입니다. 윈도우 확대시 변화되는 모습을 시각적으로 보여 줍니다.

정렬 기능이 인스펙터에 추가되었습니다. Alignment 항목은 다른 오브젝트와 같이 선택되었을 때 적용이 가능합니다.

Placement는 가로 또는 세로로 정중앙에 위치하게 합니다.

Xcode와 마찬가지로 인터페이스 빌더 3.1에도 재미있고 신기한 기능들이 많이 추가 된 것 같습니다. 잠시 사용해 본 것이라 틀린 내용들이 있을 수 있습니다. 알려 주시면 수정하겠습니다.

이전 인터페이스 빌더를 보면 독특한 방식은 인상 깊었지만 무엇인지 약간 부족한 느낌을 받았습니다. 하지만 이번 3.1버젼은 비록 짧은 시간 일부분만 확인해 보았지만, 안정적이고 완성도가 많이 높아졌다는 느낌을 받았습니다.

출처 : http://blog.naver.com/PostView.nhn?blogId=seogi1004&logNo=110085700131
Posted by 오늘마감

댓글을 달아 주세요