Apple выложила iOS Human Interface Guidelines в открытый доступ. Ios интерфейс
Руководство по разработке в IOS: Интерфейс — Часть 2
В первой части нашего руководства, предназначенного для желающих начать программировать для iOS (iOS tutorial), мы кратко рассмотрели процесс разработки приложения для iPhone и познакомились с Xcode.
Сегодня перейдем к второй части руководства и опишем процесс создания полностью функционального приложения для iPhone с навигацией посредством вкладок для конвертации единиц измерения температуры и расстояния. Не беда, если вы плохо знаете Xcode, вы быстро привыкнете к интерфейсу. К тому же каждый шаг будет детально описан.
Результатом урока будет приложение, которое не может быть запущено на iPhone, поскольку для этого необходимо купить программу для разработчиков, но его можно запустить в iOS Simulator под Mac OS X. Вы также можете скачать файлы проекта, чтобы сверяться с ними в случае сомнений по поводу каких-либо шагов. Итак, наша цель – создать приложение.
Примечание: Для работы с Xcode необходимо иметь компьютер с Macintosh Operating System (Mac OS), на Windows делать это легально нельзя.Pre-Setup: установка Xcode PackagesЕсли у вас еще нет Xcode 4, нужно его установить (в этом руководстве речь идет именно об этой версии). Если ОС вашего компьютера — Mac OS X Lion, найти Xcode 4 проще всего в App Store. В Xcode входит 4 iOS SDK & Simulator для разработки и запуска приложений для iPhone прямо на компьютере.
Также Xcode 4 можно скачать на официальной странице, либо можно найти его в вашем аккаунте разработчика, который можно бесплатно зарегистрировать на сайте Apple Developer.
Если не получилось, воспользуйтесь Google. Apple старается держать высокую плануку для разработчиков, поэтому подготовиться к разработке может быть нелегко. К счастью, достаточно установить только Xcode, в котором есть все необходимые средства разработки под iPhone.После завершения установки запускайте Xcode и приступим к работе.
1. Создание нового проекта
Запустите Xcode 4, появится стартовый экран с несколькими параметрами по умолчанию. Выберите Create a new Xcode project, чтобы открыть главное окно. Здесь предлагается выбор шаблона. Мы используем Tabbed Application.
Нажмите Next, после этого нужно ввести название проекта. Назовём наш проект Converter. Затем необходимо ввести Company Identifier, например, com.hongkiat, который используется для сортировки внутренних директорий приложения. Выберите iPhone в Device Family и отметьте галочками все опции ниже. Нажмите next и выберите, где будут размещены файлы проекта.
В левой панели вы увидите Project Navigator с новыми файлами. Кликните на Converter, чтобы просмотреть все находящиеся внутри файлы. Рядом с Project Navigator располагается Document Outline. Запомните эти названия, поскольку они будут использоваться в этом руководстве.
На папки на картинке не обращайте внимания. Это лишь пример для отображения структуры рабочей поверхности xCode.1 — Project Navigator; 2 — Interface Builder Editor; 3 — Utilities ; 4 — Тулбар ; 5 — Document Outline
Необходимо обратить внимание на три очень важных файла: MainStoryboard.storyboard, FirstViewController.h и FirstViewController.m. Файлы с расширениями .h и.m используются для заголовка и кода реализации, который связывает back-end программирование с front-end кнопками и текстовыми полями интерфейса. Также вы должны увидеть соответствующие файлы SecondViewController.h и SecondViewController.m для Second View.
Примечание: Front-end — часть программы, которая взаимодействует с пользователем. Back-end —внутренняя, невидимая пользователю, её часть.
Storyboard-файл первоначально был .xib-файлом, который был портирован из Interface Builder. В последнем релизе Xcode 4.2 эта функциональность сведена в подобие блок-схемы для упрощения процесса редактирования. При создании нового проекта можно отменить опцию storyboard, и вы получите отдельные.xib-файлы для каждого вида. Если вам удобно — используйте старую систему, а в этой статье мы будем всё-таки придерживаться именно storyboard-метода.
2. Работа с иконками панели вкладок
Начнем с создания компонентов интерфейса, а к программированию на Objective-C вернемся позднее. Прежде всего скачайте набор иконок Glyphish. Они предлагают дополнительно набор иконок высокого разрешения для iPhone 4 с дисплеем Retina, хотя мы можем использовать стандартные.
В Xcode в Project Navigator правым кликом откройте первую желтую папку, и выберите Add files to Group…. Group — это имя проекта, в нашем случае — Converter.
Откроется новое окно, в котором нужно выбрать файлы, которые мы добавим в Xcode. Выберите Glyphish Icon, а из файлов иконок выберите 61-brightness.png. Кликните Add, и он добавится в директорию проекта. Таким же образом добавьте 07-map-marker.png.
Теперь выберите MainStoryboard.storyboard, чтобы открыть визуальный редактор в центральной части программы. Справа от Project Navigator появится меню Document Outline. Это документированный список всех страниц, элементов, видов и навигации приложения.
Перед тем, как добавлять иконки, нам потребуется использовать еще одно меню, Utilities. Его панель по умолчанию включена, вручную это можно сделать, выбрав View > Utilities > Show Utilities в верхней панели меню.
Возвращаясь к Document Outline, обратим внимание на то, как в First View и Second View увидеть площадку сцен (scene box) и контроллер вида.Кликните на левую стрелку First View Controller – First. Появятся элементы, в том числе Tab Bar. Выберите его (если ничего не отображается, попробуйте сделать скролл вправо). Все изменения во вкладках будут производиться в Attributes Inspector, он вызывается по View > Utilities > Show Attributes Inspector.
Теперь переведите взгляд на панель Utilities в правой части редактора. Там под Tab Bar находятся опции Title и Image. Откройте Image, 61-brightness.png, иконка будет присвоена Tab Bar’у для First View. Также можно удалить название из Tab Bar, тогда под иконкой не будет текста.Для работы с Second View можно вернуться к Document Outline и открыть Second View Controller – Second, отобразится Tab Bar – Second. Кликните по Tab Bar Item – Second и найдите на панели в правой части редактора Title и Image. Откройте Image option, выберите 07-map-marker.png, иконка будет привязана к Tab Bar’у для Second View. Удалите название Tab Bar.
3. Дизайн видов с объектами
Завершив импортирование и установку изображений, перейдем к дизайну видов. Мы:
a) сделаем дизайн First View;b) скопируем все элементы из First View и вставим в Second View;c) сделаем в Second View некоторые изменения.
Для всех видов по умолчанию даны текстовый заголовок (text header) и расшифровка (description object). Дважды кликните на текст First View в контроллере First View и измените его на Temp Converter(напомню, Converter — имя нашего проекта). Повторите те же действия с контроллером Second View и поменяйте текст на Distance Converter. Чтобы изменить шрифт, его цвет, размер и т. д., нужно выбрать текст и перейти в Attributes Inspector, панель Utilities.
Для расшифровки под заголовком в контроллере First View, можно дважды кликнуть по тексту и дать описание действий для каждого вида, например, «Введите значение для конвертации из градусов Фаренгейта в Цельсия». Повторим те же действия относительнотроллера Sec Controllerond View, но описание будет «Введите значение для конвертации миль в километры и астрономические единицы».
Теперь нужно создать поле для ввода числа. В нижней части панели Utilities расположена библиотека Objects, которую также можно открыть так: View > Utilities > Show Object Library. В выпадающем меню выберите Controls, затем Text Field, и перетащите в контроллер First View.
Расположите поле посередине. Изменить размер можно кликнув по нему. В Attributes inspector (панель Utilities) также можно изменить цвет текста в окне ввода. Теперь добавьте “Enter temperature…”, в поле Placeholder (не в поле Text).
Теперь немного поработаем над тем, чтобы сделать интерфейс более дружественным. Найдите на панели Utilities пункт Clear Button (Кнопка очистки) и поменяйте значение с Never appears на Appears while editing. Это позволит удалять всю запись целиком не нажимая крестик удаления X несколько раз.Затем на той же панели найдите пункт Keyboard (клавиатура) с выпадающим меню. Изменим его с Default на Number Pad чтобы можно было вводить только цифры.
Теперь нужно создать кнопку, после нажатия на которую происходила бы конвертация. Перетащите круглую кнопку с квадратом внутри из Object Library, расположенной в нижней части панели Utilities и разместите ее под текстовым полем, дважды кликните и впишите Convert!. Опять же, с помощью Attributes inspector можно поменять стиль, хотя и по умолчанию все выглядит неплохо.
Для того, чтобы управлять текстом, который выдается после конвертации, нужно перетащить Label object из Object Library в контроллер First View. При перемещении ярлыка для просмотра по умолчанию ему присваивается название Label. Текст нужно удалить, чтобы он не показывался при запуске приложения. Расширьте поле и разместите его под кнопкой Convert.
Перед тем, как перейти к контроллеру Second View, можно улучшить дизайн контроллера First View. Это лучше делать на данном этапе — когда мы будем дублировать элементы из контроллера First View в Second View не пришлось переделывать контроллер Second View. Можно сэкономить время, скопировав все из First View, но, поскольку функционал контроллера Second View отличается, нужно внести некоторые изменения.
Кликните View в контроллере Second View в панели Document Outline, в окне просмотра выделите все элементы и удалите их. Это удалит только текстовый заголовок и расшифровку (description object), Second View станет пустым. Теперь выделите все элементы в First View и нажмите cmd+c/cmd+v чтобы скопировать их в пустой Second View. Вот какие изменения объектов необходимо сделать в Second View:
- заменить текстовый заголовок на “Distance Converter”;
- текстовое поле — в Placeholder пишем “Enter distance…” и в Keyboard ставим “Number Pad”;
- лейблы — добавьте еще один Label под существующим. Верхний Label будет отображать километры, а нижний – астрономические единицы.
Вот что должно получиться. Как видим, полученный Second View почти идентичен First View.
4. Программирование в First View
С графикой все, теперь перейдем к программированию. Можно начать с разработки функциональности бекенда для более простого First View. Выберите FirstViewController.h в Project navigator.
Нужно изменить код, дав интерфейс-названия (instance names) всем функциям и свойствам, которые мы используем. В FirstViewController.h вы увидите такой код:
#import <UIKit/UIKit.h> @interface FirstViewController: UIViewController @endЗамените его находящимся ниже. Ключевое слово @interface создает подкласс UIViewController, который является видом по умолчанию во всех приложениях в iOS.
#import <UIKit/UIKit.h> @interface FirstViewController: UIViewController { UITextField *tempTextBox; UILabel *calcResult; } @property (nonatomic, retain) IBOutlet UILabel *calcResult; @property (nonatomic, retain) IBOutlet UITextField *tempTextBox; - (IBAction)degreeConvert:(id)sender; - (IBAction)backgroundTouchedHideKeyboard:(id)sender; @endНеобходимо объявить IBOutlets (Interface Builder Outlets) для каждого элемента нашего приложения. Это то, что создает @property — новый аутлет («выход», поле класса, ссылающееся на элемент интерфейса) для Xcode, чтобы соединяться с интерфейсом. Также определим два действия, которые являются, выражаясь непрофессиональным языком, просто блоками кода, выполняющимися при каждом их вызове.DegreeConvert берет значение из текстового поля и производит конвертацию градусов Фаренгейта в градусы Цельсия. BackgroundTouchedHideKeyboard добавим для того, чтобы клавиатура скрывалась, если пользователь касается фона.
Переходим к отличиям между файлами .h и.m. Мы обозначили все функции и переменные, но пока они ничего не делают и ничего не соединяют. Нужно реализовать функциональность в FirstViewController.m. Сохраните изменения и откройте FirstViewController.m в Project Navigator. Нужно создать a доступ к элементами соединения в шапке First Viewer. Это делает @synthesize, так что теперь наши действия могут влиять на различные объекты на экранеДобавьте @synthesize tempTextBox, calcResult; в FirstViewController.m, первые строчки будут выглядеть так:
#import "FirstViewController.h" @implementation FirstViewController @synthesize tempTextBox, calcResult;Здесь заявляются текстовое поле и лейбл результата соответственно. Далее взглянем на две функции, которые были написаны заранее. Если вы еще плохо знакомы с синтаксисом Objective-C, они могут показаться запутанными, но со временем вы привыкнете к такой структуре. Скопируйте этот текст в файл.
- (void)degreeConvert:(id)sender { double fahren = [tempTextBox.text doubleValue]; double celsius = (fahren - 32) / 1.8; [tempTextBox resignFirstResponder]; NSString *convertResult = [[NSString alloc] initWithFormat: @"Celsius: %f", celsius]; calcResult.text = convertResult; } - (void)backgroundTouchedHideKeyboard:(id)sender { [tempTextBox resignFirstResponder]; }Сначала у нас есть degreeConvert, который не получает параметров и возвращает пустоту. Это метод, вызываемый при нажатии пользователем кнопки конвертации в First View. Переменная fahren получает значение из введенного пользователем. Другую, celsius, можно вычислить с помощью элементарных математических действий.
Теперь строка [tempTextBox resignFirstResponder] вызывает метод resignFirstResponder на нашей клавиатуре. Этот код также есть во второй функции backgroundTouchedHideKeyboard, что отвечает за отмену выбора текстового поля и скрывает клавиатуру после того, как пользователь касается фона или «нажимает» кнопку конвертации.Остальное в функции degreeConvert создает новую строку/стрингу (NSString) для хранения конвертации Цельсия и использования синтаксиса точек, чтобы добавить его в поле лейбла. Если вы знакомы с языками, основанными на С (Java, PHP, C#/C++, Perl), некоторые из этих терминов могут быть вам знакомы.Теперь найдите вот этот код:
- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; }Замените его следующим:
- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.tempTextBox = nil; self.calcResult = nil; }Внизу нашего FirstViewController.m создадим коллекцию переменных, которые написали. Мы должны освободить все различные подвиды из памяти, которые включают в себя текстовое поле или лейбл вывода. Автоматический подсчет ссылок (Automatic Reference Counting — ARC) должен автоматически обращаться к переменным из памяти, что сэкономит массу нервов
5. Соединяем действия и аутлеты
Это финальная стадия для First View, где мы соединим наши фрон-енд элементы и бек-енд код! При построении IOS-приложений, всегда есть три стадии — внешний вид, код и их соединение. Сейчас мы соединим все элементы First View и код, и заставим их работать!
Сохраните FirstViewController.h и FirstViewController.m, чтобы быть уверенными, что все обновлено. Затем перейдите в Document Outline, там — оранжевый шар, который должен называться First View Controller — First.
Кликните по нему, чтобы выбрать, и в First View должен появиться синий контур. Нажмите Ctrl и кликните First View Controller – First, перетащите на текстовое поле и отпустите.
После этого появится список «выходов» Outlets. Выберите в нем “tempTextBox”. Если соединение будет успешным, текстовое поле замигает.
Теперь нажмите Ctrl и снова кликните First View Controller – First, перетащите на Label field и выберите “calcResult”. Оба аутлеты теперь соединены с переменными и нуждаются с соединении с действиями.
Кликните правую стрелку на First View Controller – First, вы увидите пункт View — выберите его, откройте Identity inspector на панели Utilities (также его можно найти в верхнем меню вкладок, выбрав View > Utilities > Show Identity Inspector). В разделе Custom Class введите UIControl или выберите его из выпадающего меню.
Чтобы клавиатура распознавала фон как объект, по которому возможно «тапать», его нужно конвертировать в элемент управления. В панели Utilities активируйте Connections inspector (в верхнем меню вкладок выберите View > Utilities > Show Connections Inspector).
Таким образом, мы связываем событие на странице (перелистывание, тап, удержание, и т. д.) и одиночный вызов функции. Найдите в списке событий Touch Down. Нажмите маленький кружок, расположенный в правой части этого события и перетащите его в контроллер First View. Будут предложены два действия, выберите TouchedHideKeyboard, появится мигание.
И, наконец, выберите кнопку Convert и убедитесь, что она подсвечена синим как на скриншоте, но без выбора всего View Control. В Connections Inspector перетащите маленький кружок Touch Up Inside в контроллер First View. Выберите функцию degreeConvert, которая будет запускаться только если пользователь «нажимает» и «отпускает» кнопку в пределах установленных границ.
6. Перенос кода в Second View
Теперь сохранитесь и скомпилируйте приложение. Если все сделано правильно, после ввода значений в текстовое поле и нажатия соответствующей кнопки программа должна выдавать корректный результат в градусах Цельсия. Если же выдает ошибки, попробуйте скачать демо-проект в конце статьи, сравнить и исправить ошибки.Итак, Second View мы создали чуть раньше, и сейчас будем с ним работать. Наш Second View будет выдавать не один результат конвертации (из градусов Фаренгейта в Цельсия), а два: из миль в километры и астрономические единицы. Для этого нужно перенести код в Objective-C из First View и внести изменения чтобы он правильно заработал в Second View, затем связать все элементы.Начнем с хедер-кода, затем займемся реализацией. Ниже добавлен код из файла SecondViewController.h. По большей части он идентичен хедером контроллера First View, но с дополнительным свойством, связанным со вторым элементом UILabel.
Найдите в SecondViewController.h следующее:
#import <UIKit/UIKit.h> @interface SecondViewController: UIViewController @endЗамените на этот код:
#import
@interface SecondViewController: UIViewController { UITextField *distTextBox; UILabel *distResult; UILabel *auResult; } @property (nonatomic, retain) IBOutlet UILabel *distResult; @property (nonatomic, retain) IBOutlet UILabel *auResult; @property (nonatomic, retain) IBOutlet UITextField *distTextBox; - (IBAction)distanceConvert:(id)sender; - (IBAction)backgroundTouchedHideKeyboard:(id)sender; @endКак видите, я заменил все имена инстанс для действий и аутлетов. DistTextBox теперь будет держать введенную цифру расстояния. DistResult это лейбл первого расстояния (километры), а auResult будет содержать 2й лейбл, лейбл ковертирования. distanceConvert это новое действие, которое вызывается для конвертирования числового значения, а backgroundTouchedHideKeyboard остается тем же.
Как и ранее, мы используем иерархию MVC для разделения функций приложений от контроллера между объектами сториборд. Если ваш SecondViewController.h выглядит так же, как и на примере, сохраните изменения и выберите SecondViewController.m. Также разобьем код на две части.Код ниже — из верхней части SecondViewController.m. Он содержит оператор @synthesize для создания методов установки и получения каждой инстансной переменной. Принцип синтеза инстансных переменных поначалу может быть непонятным, в этом случае для его лучшего понимания попробуйте ознакомится с этим обсуждением: StackOverflow (англ)
Теперь взгляните код в SecondViewController.m:
#import "SecondViewController.h" @implementation SecondViewControllerЗамените его на этот код:
#import "SecondViewController.h" @implementation SecondViewController @synthesize distResult, auResult, distTextBox; - (void)distanceConvert:(id)sender { double miles = [distTextBox.text doubleValue]; double km = miles * 1.61; // multiply miles by ~1.609 kilometers double au = miles / 92956000; // divide miles by 92,956,000AU [distTextBox resignFirstResponder]; NSString *kiloResult = [[NSString alloc] initWithFormat: @"Kilometers: %f", km]; NSString *ausResult = [[NSString alloc] initWithFormat: @"AUs: %f", au]; distResult.text = kiloResult; auResult.text = ausResult; } - (void)backgroundTouchedHideKeyboard:(id)sender { [distTextBox resignFirstResponder]; }Новое действие distanceConvert будет вызываться при нажатии пользователем кнопки Convert. Переменная miles будет брать число из distTextBox, а km и au производить математические действия для получения данных. После этого, используя 2 линии мы выделяем память для для двух объектов NSString, удерживающих информацию о километрах и АЕ. Используя точечный синтаксис, мы вызываем свойство .text для изменения текста UILabel.Теперь найдите следующий код:
- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; }Замените на этот:
- (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; self.distResult = nil; self.auResult = nil; self.distTextBox = nil; }И последний фрагмент кода, он находится в самом конце SecondViewController.m. После того, как view cкомпилирован и отображается, вызывается viewDidUnload. Мы установим три свойства, синтезированные ранее в nil (null в Objective-C) и освободим их инстансу из памяти. Приложение почти готово, осталось соединить сториборд с аутлетами и действиями.
7. Соединение Second View
Процесс простроение видов представляет собой повтор пятого шага с некоторыми дополнительными действиями. Можно использовать это как тренировку памяти на соединении сториборда с аутлетами и действиями, тем более что с ними часто возникают затруднения. Как обычно, сохраните SecondViewController.h и SecondViewController.m чтобы быть уверенным, что все обновлено. Затем перейдите обратно в сториборд и найдите в Document Outline оранжевый шар, который должен называться Second View Controller — Second.
Кликните по шару, сцена Second View должена выделиться синим контуром. Теперь нажмите Ctrl и кликните по Second View Controller — Second, перетащите его в текстовое поле и отпустите.
После этого появится список Outlets, выберите “distTextBox”. Если соедиенение успешно, тестовое поле будет мигать.
Затем нажмите Ctrl и кликните Second View Controller — Second, перетащите в поле Label и выберите distResult. Повторите те же действия со 2м лейблом, расположенным под первым, выбрав auResult. Оба наших аутлета теперь соединены со своими переменными и теперь их нужно присоединить к действиям.
Кликните по правой стрелке в Second View Controller — Second, затем — по компоненту View. Через панель Utilities откройте Identity inspector (также его можно открыть через главное меню вкладок > View > Utilities > Show Identity Inspector). B Custom Class введите или выберите из выпадающего меню UIControl.Чтобы фон распознавался клавиатурой как объект, по которому возможно «тапнуть», его нужно конвертировать в элемент управления. Активируйте Connections inspector (через панель Utilities или верхнее меню вкладок > View > Utilities > Show Connections Inspector).
Таким образом мы связываем событие на странице (перелистывание, тап, удержание, и т.д.) и вызов отдельной функции. Найдите в списке событий Touch Down. Нажмите маленький кружок, расположенный в правой части Touch Down event и перетащите его в Second View Controller. Будут предложены два действия, выберите backgroundTouchedHideKeyboard, появится мигание.
Кликните кнопку Convert, она должна поменять цвет на синий как на скриншоте, но без выбора всего View Control. В Connections Inspector перетащите маленький кружок Touch Up Inside в контроллер Second View. Выберите функцию distanceConvert, которая будет запускаться только если пользователь «нажимает» и «отпускает» кнопку внутри определенной области.Теперь сохранитесь и скомпилируйте приложение. Если ошибок нет, все должно работать и можно заняться мелкими улучшениями — изменить текст, шрифт, или, например, поменять PNG логотипа.Спасибо за использование этого руководства и мои поздравления — вы только что создали свое первое приложение для iPhone!Что-то не получается? Вот файл для тестирования.
Заключительные слова
В заключение будет полезно сделать краткий обзор ключевых моментов руководства. Итак, мы поставили перед собой задачу создать приложение для iPhone c навигацией вкладками: 2 UIViews, которые мы дополнили текстовым полем, кнопкой и лейблами. Затем мы написали код на Objective-C для определяющих инстансных переменных (ivars) и действий (экшены, функции чтобы обрабатывать числа для конвертации.Наконец, мы соединили объекты для каждой инстансной. Это позоляет бэк-енд коду Objective-C нацеливаться на ID, такие как tempTextBox, и связать его в сториборд-объекте.Надеюсь, вы подметили много ключевых слов и нюансов работы Xcode. Хотя вряд ли вы станете экспертом в разработке приложений iOS, скорее всего, многие аспекты будут для вас непонятны. Но! Программирование для iOS — это прежде всего практика, так что ничего страшного, если поначалу вы не все понимаете. Скачайте файл демо-проекта, ссылка на который была выше и просмотрите его, это поможет лучше понять данное руководство и Xcode в целом.
И один совет напоследок: никогда не сдавайтесь!
по мотивам
Naikom » Дизайн » Веб-дизайн
naikom.ru
Интерфейс Ios
Новый концепт интерфейса iOS 7
Все самые интересные новости и обзоры тут vseoapple.com Новый концепт интерфейса iOS 7 от французов, достойно внима...
5 yıl önce
Xcode - Интерфейс (урок 01 - ч. 01)
Все уроки вы сможете найти на сайте podcast.iPromix.de В этом уроке мы познакомимся с вами с программой Xcode и...
5 yıl önce
Обзор iOS 7 часть I (интерфейс)
Сегодня мы предлагаем Вашему вниманию первый обзор седьмой версии мобильной операционной системы от Apple....
5 yıl önce
Интерфейс Apple Watch на iPhone
Apple Watch UI на iPhone. Как выглядит интерфейс Apple Watch на iPhone. Подпишись на канал если ты этого еще не сделал! www.you...
3 yıl önce
trfilms.net
Интерфейс приложений Apple
В обозримом будущем Apple намерена провести редизайн сервиса iCloud. Это подтверждает размещенная на сайте компании вакансия дизайнера, которому, согласно описанию, предстоит заняться совершенствованием интерфейса облачного хранилища, а также учетных записей Apple ID.
Читать далее ···
Путь к фирменному браузеру операционной системы Haiku был очень непростым. С 2001 по 2009, было предпринято несколько попыток заменить быстро устаревающий Net+ чем-то более современным. Только последняя из них была успешной.
Читать далее ···
iPhone мог получить ужасающую клавиатуру с режимом T9, если бы не перфекционизм руководства Apple. Об этом Кен Косиенда, дизайнер интерфейсов, работавший в компании в тот период, рассказал в своей книге Creative Selection, подкрепив свои слова чертежами и скриншотами.
Читать далее ···
iPad Pro 2018 года получит матрицу со скругленными углами как у iPhone X. К такому выводу пришел разработчик Гильерме Рэмбо, обнаружив в коде операционной системы сглаживающий компонент. Запуск планшетной версии iOS 12 в симуляторе только подтвердил его версию.
Читать далее ···
Apple готовится отказаться от использования Lightning-разъемов в iPhone и iPad будущих поколений в пользу универсального USB-C. Это следует из материалов доклада DigiTimes. Аналитики, ссылаясь на источники в цепи поставок, утверждают, что переход на новый стандарт состоится не ранее 2019 года.
Читать далее ···
Apple следует позволить сторонним разработчикам создавать приложения, которые бы улучшали интерфейс iOS, как это уже реализовано на Android. С таким требованием выступила инициативная группа под названием Digital Wellness Warriors, начав собирать подписи в поддержку своей позиции.
Читать далее ···
Safari – прекрасный инструмент для продуктивной работы в macOS. Благодаря скорости работы и простоте использования он пользуется большой популярностью у пользователей. Но использование браузера можно сделать еще удобнее с помощью простого трюка, который позволит отображать иконки веб-сайтов.
Читать далее ···
Большинство пользователей при необходимости найти что-то в Google используют обычный поисковой запрос, вводя его вручную или же — в редких случаях — с помощью голоса. Но как насчет ввода запроса, используя палец или Apple Pencil?
Читать далее ···
В macOS 10.14, испытания которой уже проводятся штатными тестерами компании Apple, может получить «ночную» тему оформления интерфейса. Об этом разработчик Гильерме Рэмбо узнал из программного кода WebKit, где недавно была найдена отсылка к возможной поддержке iPhone 5s следующей итерации мобильной ОС.
Читать далее ···
Интерфейс Android P станет если не полной копией iOS для iPhone X, то по крайней мере близкой к оригиналу репликой. На это указывают скриншоты бета-версии еще не вышедшей операционной системы, опубликованные журналистами 9To5Google. Не заметить сходства просто невозможно.
Читать далее ···
Обновление до iOS 11.3 может нарушить работу датчика 3D Touch на некоторых iPhone, убедился AppleInsider.ru. Редакция провела собственный эксперимент, в котором задействовала несколько моделей iPhone разных поколений, у большинства из которых проявились признаки интерфейсного бага.
Читать далее ···
В 2007 году, вместе с выходом первого iPhone, Apple подарила нам простой и элегантный способ взаимодействия с устройством, Multi-Touch был действительно прорывом для своего времени. Но есть ли шанс, что компания повторит этот успех?
Читать далее ···
Google начинает бета-тестирование фреймворка Flutter, который позволит разработчикам создавать универсальные приложения для Android и iOS. Об этом пишет TechCrunch со ссылкой на официальных представителей компании. По их словам, новейший продукт призван облегчить жизнь разработчиков, позволив существенно ускорить процесс создания кросс-платформенного ПО.
Читать далее ···
Кросс-платформенный интерфейс Vulkan, обеспечивающий большую производитель и улучшенное отображение графики в играх, стал доступен на платформах iOS и macOS. Об этом говорится на официальном сайте консорциума Khronos Group, являющегося разработчиком открытых стандартов интерфейсов программирования (API), в том числе и Vulkan.
Читать далее ···
Компания Apple представила обновленный веб-интерфейс App Store и Mac App Store. В отличие от старого, он выглядит более свежо и элегантно, однако поначалу может показаться несколько непривычным. Оценить видоизмененную онлайн-версию могут все желающие вне зависимости от страны проживания.
Читать далее ···
Обвинения в копировании наработок в области создания пользовательского интерфейса, которые Qualcomm предъявила Apple в суде Южной Калифорнии, могут иметь реальные основания. Это подтверждает видеоролик с демонстрацией интерфейсных особенностей операционной системы PalmOS и основанной на жестах системы управления iPhone X.
Читать далее ···
Основная причина, по которой в iOS до сих пор отсутствует темная тема, — необходимость поддержания комфортного восприятия системы на высоком уровне. Об этом Алан Дай, вице-президент Apple по проектированию пользовательского интерфейса, рассказал в интервью британскому изданию Independent. По его словам, в Купертино всерьез рассматривали возможность внедрения темной темы, однако впоследствии решили отказаться от этой затеи.
Читать далее ···
Естественная склонность к выгоранию и проявлению перманентных зеленых линий на экране iPhone X — это далеко не все проблемы, с которыми вы рискуете столкнуться, приобретая новый флагман от Apple. Как выяснили пользователи портала Reddit, интерфейс некоторых «десяток» может начать содрогаться при переключении между приложениями, препятствуя комфортной работе с устройством.
Читать далее ···
Несмотря на то, что обновление iOS 11.2 все еще находится в стадии бета-тестирования, мы уже имеем представление о готовящихся нововведениях. Многие из них настолько незначительны, что говорить о них не имеет никакого смысла. Другие несут в себе куда больше пользы, а значит определенно заслуживают вашего внимания.
Читать далее ···appleinsider.ru
ios - Интерфейс Builder: что такое UIView Layout iOS 6/7 Deltas?
Примечание. Я заметил этот вопрос некоторое время назад, но теперь я только отправляю свой ответ, потому что NDA снят
Как вы, возможно, заметили, iOS 7 предлагает совершенно новый вид. Внешний вид элементов пользовательского интерфейса изменился, но также имеет некоторые из их размеров (или показателей в целом). Это может создать дизайн интерфейса для размещения как iOS 7, так и предшественников, которые немного больно.
Официальная строка Apple должна использовать AutoLayout для решения этой проблемы; это должно занять много хлопот из выкладки элементов пользовательского интерфейса для вас. Иногда включение этого нелегко, особенно если вы по-прежнему должны поддерживать iOS 5 по соображениям бизнеса, или ваши интерфейсы управляются таким образом, что затрудняет реализацию AutoLayout. Таким образом, Apple, похоже, предоставила вам возможность сделать вашу работу немного легче, если вы попадете в эту нишу, и они назвали эту iOS 6/7 Deltas.
Хотя ярлык в Interface Builder немного неясен в отношении того, что означает "Delta", в этом контексте код, содержащийся в файле .xib, который соответствует этой функции, немного более ясен:
<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>
В ключевом названии insetFor6xAndEarlier явно указано, что это делает; вы можете предоставить альтернативные вставки для элементов пользовательского интерфейса при работе на предшественниках iOS 7. Например, вышесказанное определяет следующее изменение треугольника:
x: 50 y: 100 width: -100 height: 200Пока значения, хранящиеся в .xib, напрямую не соответствуют цитированным значениям, между ними существует корреляция.
x: -minX y: -minY width: minX + maxX height: minY + maxYИзображения, приведенные ниже, визуально отображают это изменение. Это довольно экстремальный пример, но он демонстрирует свои способности. Я бы только ожидал на практике иметь дельта-изменения всего в несколько пикселей.
Вы можете заметить, что значения являются обратными для iOS 6; это потому, что дельта относится к типу просмотра, с которым вы работаете. Если вы редактируете iOS 6, дельта существует, чтобы правильно преобразовать элемент для iOS 7 (в обратном порядке выше).
Чтобы просмотреть разные стили, вы можете изменить способ создания интерфейса Builder на основе ОС, на котором он будет работать. Это содержится в документе "Файл инспектор- > Конструктор интерфейса" (первая вкладка на правой панели):
Не напрямую, но вы можете легко добиться такого же эффекта, получив условные проверки версии ОС в своем коде и соответствующим образом задав правильную позицию/размер. Дельта-способность существует в Interface Builder, потому что не было бы простого способа иметь условное позиционирование без кода, чтобы сделать это, а точка Interface Builder - сделать код максимально возможным для интерфейса пользователя.
Apple настоятельно рекомендует использовать AutoLayout, это делает вашу жизнь проще в большинстве случаев. Если вы не можете использовать его (по причинам, указанным выше), дельта предоставляет вам возможность правильно позиционировать элементы пользовательского интерфейса, основываясь на текущих показателях операционной системы, без необходимости вручную переставлять их в коде. Хорошим примером является настройка отсутствия строки состояния, но есть много других вариантов использования.
Естественно, если вы только разрабатываете для iOS7 и выше, вам не нужно знать эту функцию/не обнаружите ее. Только если вам нужно иметь устройства iOS6, запускающие ваше приложение, когда они построены с помощью iOS7 SDK, без автозапуска, вам нужны дельта.
На момент написания статьи (21 августа) я не могу найти документацию об этой функции, а также никаких упоминаний в материалах WWDC. У меня была игра, и после небольшого исследования я узнал об этом.
qaru.site
Apple выложила iOS Human Interface Guidelines в открытый доступ
Привет, меня зовут Оля Сартакова. Я работаю в Redmadrobot и преподаю дизайн мобильных приложений в Британке. Хочу рассказать, как работаю с текстами в интерфейсах.
Самый однозначный носитель смысла среди инструментов дизайнера — это текст. Есть ещё иконки и иллюстрации, но они, как иероглифическое письмо: ёмкие, компактные и не очень понятные. Их можно сравнить с жестами в устной речи. С их помощью можно передать эмоции, подбодрить или послать собеседника. Но, например, объяснить, что активировать банковскую карту сейчас не получится из-за сбоя на сервере, будет нелегко.
В начале работы над проектом никто лучше дизайнеров не разбирается в том, как мы запланировали реализовать пересечение задач бизнеса и потребностей пользователя. Поэтому никто лучше нас не опишет это словами.
1. Понять, кто и в какой ситуации будет пользоваться приложением
В большинстве случаев нам везёт с аудиторией: это люди, давно и хорошо знакомые с интерфейсами, поэтому им не нужно объяснять, что делать с полями ввода и чекбоксами. Но, например, пожилым людям потребуются дополнительные подсказки. А дошкольникам тексты лучше озвучивать и сопровождать иллюстрациями.
Важно учесть контекст использования. Приложения для водителей должны не отвлекать от дороги и быть предельно понятны даже утомленному пробками и детскими криками отцу семейства по пути на дачу вечером в пятницу.
На этом этапе мы определяемся со стилем коммуникации и тем, насколько подробные тексты понадобятся. Поговорите с потенциальными пользователями, всегда можно предположить, кто и как будет пользоваться приложением, но откуда вам знать, что в голове у этих людей?
После анализа результатов интервью можно придумать самого сложного персонажа в самой непростой ситуации и проектировать приложение для него.
Давайте разберём пример: проработаем сценарий оформления заказа для приложения доставки пиццы. Наш пользователь — 28-летний Василий. Характер прескверный, не женат. Он живёт во Фрязино, работает в Москве. Сегодня вечер пятницы. Василий после работы выпил немало пива с коллегами. Сейчас он возвращается домой на электричке, в которой не всегда хорошо ловит интернет, и хочет есть.
2. Выписать всё, что может пригодиться
Для этого нужно побеседовать с клиентом, побеседовать с пользователями, проанализировать конкурентов, пофантазировать самому.
С пиццей у меня получилось так.
Василий хочет, чтобы пицца приехала к нему домой именно тогда, когда он сам туда доберется. Он хочет, чтобы она была горячая, и чтобы ему положили побольше салфеток. Платить Василию удобнее всего через Apple Pay, потому что набирать номер карты лень.
Бизнес (пиццерия) заинтересован в том, чтобы Василий сделал заказ как можно быстрее и оплатил заранее.
Чтобы Василий сделал заказ быстрее, можно спросить у него только номер телефона, а детали потом уточнит оператор колл-центра. Но если Василий делает заказ в первый раз, а приложение не просит адрес, платить заранее он вряд ли захочет. Поэтому ввод адреса оставим, но сделаем его необязательным.
Если не спросить у Василия время доставки, курьер может привезти пиццу не вовремя и ему придётся ждать под дверью. Про время надо спросить.
Василий хочет оплатить пиццу через Apple Pay, но не все с ними солидарны. Во-первых, не у всех смартфоны поддерживают Apple / Google / Samsung Pay, а во-вторых, при первом заказе люди опасаются предоплат — вдруг вообще не привезут. Получается, что в приложении нужны, как минимум, четыре способа оплаты: Apple / Google / Samsung Pay, картой в приложении, картой курьеру и наличными.
Чтобы ускорить оформление заказа, можно поле со способом оплаты предзаполнить. Для постоянных пользователей все просто — можно сохранить последний выбранный способ. Если же мы о Василии ничего не знаем, предположение можно построить на данных о посетителях пиццерии.
Ресторану нужно будет связаться с клиентом, а чтобы быть вежливыми — спросить, как его зовут. Это лучше сделать в самом начале: во-первых, знакомиться лучше перед тем, как говорить про деньги, а во-вторых, по телефону можно узнать пользователя, восстановить историю его взаимоотношений с пиццерией и предзаполнить часть полей формы.
Но прежде чем раскрывать пользователю информацию об истории заказов, нужно убедиться, что этот номер принадлежит ему. Самый простой способ — отправить SMS c кодом подтверждения. Но даже если номер действительно его, нельзя показывать информацию о заказах старше полугода — за это время у номера мог смениться хозяин.
Итого, в форме оформления заказа нужны следующие поля:
- Имя и телефон клиента.
- Способ получения заказа: доставка или самовывоз (мы разберем только доставку, потому что Василию нужна именно она).
- Время доставки: чем скорее, тем лучше, или к указанному времени.
- Адрес доставки.
- Способ оплаты.
Так форма будет смотреться на экране. Для начала поделю оформление заказа на 2 шага. На первом проверю, знаком ли нам пользователь, на втором узнаю, как он хочет получить и оплатить заказ.
3. Убираем то, без чего можно обойтись
Лучше не перегружать экран и подбирать максимально лаконичные формулировки. Главное при сокращении — не потерять смысл.
В черновике меня смущают повторы «доставки», «при получении» и формулировка «Способ оплаты» (хоть это и не критично, но выглядит слишком формально). Переформулируем все три подзаголовка в одном стиле, уберем «при получении» из оплаты наличными — всё равно иначе деньги передать невозможно:
Теперь меня смущает только «Укажите адрес». Можно заменить его на подсказку о том, что именно придётся указать:
Я вынесла указание адреса доставки на отдельный экран, чтобы не перегружать текущий.
Чтобы курьер доставил пиццу, нужно узнать название города, улицы, номер дома и, если есть, квартиры или офиса. Найти подъезд и этаж курьер сможет и самостоятельно. Но на поиск и вычисление потребуется время, оно же — деньги.
Чтобы избежать ошибок при указании адреса, можно использовать справочник адресов Яндекса или Google. В этом случае можно вводить город, улицу и дом в одно поле — справочник не даст ошибиться с форматом данных, а подсказки ускорят ввод. Один минус — чем популярнее будет приложение, тем дороже обойдется использование справочника.
Форма получилась большая, но убрать из неё нечего. Что делать?
Один приём мы уже использовали — поделили её на 2 шага. Второй способ сработает при повторном заказе — можно запоминать введённые данные и показывать поля предзаполненными.
4. Заботимся и объясняем
Основной сценарий продуман, теперь нужно подумать о том, что может пойти не так? Лучшая отработка негативных сценариев — невозможность допустить ошибку. Например, если доставка ограничена по времени, не давайте пользователю выбрать дату и время, когда курьер не работает.
Превышен лимит неактивности → Просто верните человека на предыдущий шаг.
Неверный формат данных → Показывайте сразу правильную клавиатуру.
Если предотвратить ошибку невозможно, формулируйте оповещения на понятном человеку языке и объясняйте, что произошло, в чем причина и что сделать. Как правило заботливое сообщение об ошибке занимает больше места, чем «роботизированное», но люди не будут на нас в обиде.
Сервер не отвечает →
- Если сервер недоступен из-за того, что у пользователя пропало соединение с интернетом, так и говорим → Нет соединения с интернетом. Проверьте настройки сети.
- Если сервер недоступен по собственным мотивам, единственный вариант, продумать автоматическое решение проблемы и подсказать, как можно решить её прямо сейчас. → Нет связи с сервером. Не закрывайте приложение, и ваш заказ отправится автоматически, как только мы устраним неполадку. Или позвоните нам по телефону +7 (495) 999-99-99 — и мы оформим заказ.
Неверный номер телефона →
- Если не хватает цифры → Не хватает цифры
- Иногда пользователь сознательно «допускает ошибку». Например, не указывает номер телефона или пишет случайный набор цифр, потому что не хочет, чтобы ему лишний раз звонили. Постарайтесь найти в этом пользу для человека и расскажите о ней. → По такому номеру курьер не дозвонится, если не сможет вас найти.
5. Перечитываем
Когда экран готов, перечитываем текст с начала до конца. Хороший интерфейс будет звучать как диалог между заботливым оператором и пользователем. Если «диалог» не складывается — возвращаемся к предыдущим шагам.
6. Тестируем на людях
Когда мы довольны результатом, пора проверить интерфейс на целевой аудитории. Лучше всего собрать прототип с нажимаемыми кнопочками в InVision, Marvel или Flinto и дать нескольким людям из целевой аудитории задание пройти целевой сценарий — заказать пиццу с доставкой на дом в 20:00. На что нужно обратить внимание:
- Легко ли пользователям? Всё ли им понятно?
- Где у них возникают проблемы? Почему?
- Нравится ли им тон общения, который вы выбрали?
Что нельзя делать:
- подсказывать, куда нажать;
- выражать свои эмоции, когда у человека что-то не получается;
- задавать вопросы, пока он не закончил.
Дайте задачу, потом внимательно наблюдайте, как человек с ней справляется, а в конце задайте вопросы.
Если несколько человек спотыкаются на одних и тех же моментах или большинство раздражает стиль коммуникации, возвращаемся на первый шаг и ищем ошибку.
7. Определяем правила
Когда вы определились с тем, что сказать,нужно понять, как говорить с пользователем. Уместны ли шутки, нужны ли подсказки, как обращаться к Василию и как объяснить ему, почему пиццерия вдруг перестала принимать заказы на время футбольного матча.
Каким должен быть тон подсказок в интерфейсе, о чем стоит договориться на берегу и зачем приложению редакционная политика — отдельная история. Поэтому продолжение следует.
apptractor.ru
