工程師怎麼學視覺設計
美學相對於其他理論是較為抽象、主觀的
但並非沒有快速上手的方法
首先要先將問題簡化
修圖、色彩學、排版、UI、字型學先視為獨立理論
我們應專注在特定的主題上學習
### 設計的基準,整齊 ⭐⭐⭐⭐⭐
這是最簡單也是最難的
在一開始不要挑戰 "有特色" 的排版
而是依據不同的平台、載具、呈現環境
參考相依的設計文件規範來制定格線
然後將物件依據格線排列
Web 來說可以參考 Bootstrap
Android 可以參考 Material Design 等
觀念可參考:https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-grid
### 色彩的配置 ⭐⭐⭐⭐
在美感之前
色彩是用來吸引目光的
以網頁來說我們可以把用途歸類三個等級
1. 內容、不重要的訊息等 (黑、白、灰階)
2. 可操作的內容,主要的訊息、品牌色調 (主色)
3. 最重要的行為,例如購買 (強調色)
依據這個配置只能選擇兩個色彩
主色、強調色
主色用於大部分的情境
強調色只在唯一最重要的行為 (甚至不使用)
剩下都是黑、白、灰階
這是目前相當主流的配色方法
簡單、穩定、且訊息傳達力強
觀念可參考:https://material.io/guidelines/style/color.html#color-usability
### 字體配置 ⭐⭐⭐
字體可以表現出一句文字的
文化、語氣、重要性、氣質、個性等等
就如同我們看日本人與其他亞洲人
就算沒有透過語言
從行為舉止及穿著幾乎可以認定氣質上的差異
簡化說明
字體就類型上分為兩大類
- 無襯線字體 - 也稱為黑體
- 有襯線字體 - 也稱為明體、宋體
以識別性來說首推黑體
可以避免在不同系統上的呈現落差
中文可用:Noto Sans、蘋方、微軟正黑體
英文可用:Helvetica Neue, Roboto, Segoe UI, Ubuntu ...
(英文可用的非常多,以上只是常見的)
---
除了以上說明外
不外乎就是多看相關文件
以及實作練習
可參考設計文件:
- Material Design
- iOS Human Interface Guidelines
- Bootstrap
Bootstrap 嚴格來說不算是純設計文件,
但其中觀念非常值得參考
#每日一觀點 #15
human interface guidelines中文 在 iOS Quickstart | YouTube Data API | Google Developers 的八卦
Objective-C
Swift
The steps described on this page explain how to quickly create a simple iOS
application that makes requests to the YouTube Data API. This sample shows how to
retrieve data about the GoogleDevelopers YouTube channel. The code also
includes comments that explain how to modify the query to retrieve data about
the current user's YouTube channel.
Note: The application does not conform with Apple's
iOS Human Interface Guidelines.
It is intended only to illustrate the basic concepts and steps needed to begin
working with the YouTube Data API.
Prerequisites
To run this quickstart, you'll need:
Xcode 8.0 or greater.
CocoaPods dependency manager.
Access to the internet and a web browser.
A Google account.
Step 1: Turn on the YouTube Data API
Use
this wizard
to create or select a project in the Google Developers Console and
automatically turn on the API. Click Continue, then
Go to credentials.
On the Create credentials page, click the
Cancel button.
At the top of the page, select the OAuth consent screen tab.
Select an Email address, enter a Product name if not
already set, and click the Save button.
Select the Credentials tab, click the Create credentials
button and select OAuth client ID.
Select the application type iOS, enter the name "YouTube Data API
Quickstart", bundle ID
com.example.QuickstartApp
, and click the Createbutton.
Step 2: Prepare the workspace
Note: All of the examples are based on the name
com.example.QuickstartApp
.If you named your app something other than that, like
com.example.QuickstartYTApp
, change the string QuickstartApp
to matchyour app name.
Open Xcode and create a new project:
Click File > New > Project, select the
iOS > Application > Single View Application template, and click
Next.
Set the Product Name to "QuickstartApp", Organization Identifier
to "com.example", and Language to
Objective-C.
Below the organization identifer, you should see a generated
Bundle Identifier that matches the iOS Bundle ID
(
com.example.QuickstartApp
) that you entered instep 1.b.
Click Next.
Select a destination directory for the project and click Create.
Close the project by clicking File > Close Project.
Open a Terminal window and navigate to the directory that contains the
QuickstartApp.xcodeproj
file you just created.Run the following commands to create the Podfile, install the library, and
open the resulting XCode project:
cat << EOF > Podfile &&
platform :ios, '8.0'
target 'QuickstartApp' do
pod 'GoogleAPIClientForREST/YouTube', '~> 1.2.1'
pod 'Google/SignIn', '~> 3.0.3'
end
EOF
pod install &&
open QuickstartApp.xcworkspace
In the XCode Project Navigator select the project node "QuickstartApp".
Then click the menu item File > Add files to "QuickstartApp".
Locate the GoogleService-Info.plist
file downloaded earlier and select it.
Click the Options button.
Make the following selections in the options window and then click the
Add button:
Check the Copy items if needed checkbox.
Check all targets listed in the Add to targets section.
With the project node still selected, select "QuickstartApp" in the
TARGETS section as shown in the two images below:
Click the area shown in this screenshot:
Then select the proper target:
Select the Info tab, and expand the URL Types section.
Click the + button, and add a URL scheme for your reversed client
ID. To find this value, open the GoogleService-Info.plist
configuration
file that you selected in step 2.f. Look for the REVERSED_CLIENT_ID
key. Copy the value of that key, and paste it into the URL Schemes
box on the configuration page. Leave the other fields blank.
Rebuild the project:
Click Product > Clean Build Folder (while holding the option
key).
Click Product > Build.
Step 3: Set up the sample
Replace the contents of the following files with the code provided:
AppDelegate.h
#import <UIKit/UIKit.h>
@import GoogleSignIn;@interface AppDelegate : UIResponder <UIApplicationDelegate>@property (strong, nonatomic) UIWindow *window;
@end
AppDelegate.m
#import "AppDelegate.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Initialize Google sign-in.
[GIDSignIn sharedInstance].clientID = @"<YOUR_CLIENT_ID>"; return YES;
}- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication
annotation:(id)annotation {
return [[GIDSignIn sharedInstance] handleURL:url
sourceApplication:sourceApplication
annotation:annotation];
}
@end
ViewController.h
#import <UIKit/UIKit.h>
@import GoogleSignIn;
#import <GTLRYouTube.h>@interface ViewController : UIViewController <GIDSignInDelegate, GIDSignInUIDelegate>@property (nonatomic, strong) IBOutlet GIDSignInButton *signInButton;
@property (nonatomic, strong) UITextView *output;
@property (nonatomic, strong) GTLRYouTubeService *service;
@end
ViewController.m
#import "ViewController.h"@implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];
// Configure Google Sign-in.
GIDSignIn* signIn = [GIDSignIn sharedInstance];
signIn.delegate = self;
signIn.uiDelegate = self;
signIn.scopes = [NSArray arrayWithObjects:kGTLRAuthScopeYouTubeReadonly, nil];
[signIn signInSilently]; // Add the sign-in button.
self.signInButton = [[GIDSignInButton alloc] init];
[self.view addSubview:self.signInButton]; // Create a UITextView to display output.
self.output = [[UITextView alloc] initWithFrame:self.view.bounds];
self.output.editable = false;
self.output.contentInset = UIEdgeInsetsMake(20.0, 0.0, 20.0, 0.0);
self.output.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
self.output.hidden = true;
[self.view addSubview:self.output]; // Initialize the service object.
self.service = [[GTLRYouTubeService alloc] init];
}- (void)signIn:(GIDSignIn *)signIn
didSignInForUser:(GIDGoogleUser *)user
withError:(NSError *)error {
if (error != nil) {
[self showAlert:@"Authentication Error" message:error.localizedDescription];
self.service.authorizer = nil;
} else {
self.signInButton.hidden = true;
self.output.hidden = false;
self.service.authorizer = user.authentication.fetcherAuthorizer;
[self fetchChannelResource];
}
}
// Construct a query and retrieve the channel resource for the GoogleDevelopers
// YouTube channel. Display the channel title, description, and view count.
- (void)fetchChannelResource {
GTLRYouTubeQuery_ChannelsList *query =
[GTLRYouTubeQuery_ChannelsList queryWithPart:@"snippet,statistics"];
query.identifier = @"UC_x5XG1OV2P6uZZ5FSM9Ttw";
// To retrieve data for the current user's channel, comment out the previous
// line (query.identifier ...) and uncomment the next line (query.mine ...).
// query.mine = true; [self.service executeQuery:query
delegate:self
didFinishSelector:@selector(displayResultWithTicket:finishedWithObject:error:)];
}// Process the response and display output
- (void)displayResultWithTicket:(GTLRServiceTicket *)ticket
finishedWithObject:(GTLRYouTube_ChannelListResponse *)channels
error:(NSError *)error {
if (error == nil) {
NSMutableString *output = [[NSMutableString alloc] init];
if (channels.items.count > 0) {
[output appendString:@"Channel information:\n"];
for (GTLRYouTube_Channel *channel in channels) {
NSString *title = channel.snippet.title;
NSString *description = channel.snippet.description;
NSNumber *viewCount = channel.statistics.viewCount;
[output appendFormat:@"Title: %@\nDescription: %@\nViewCount: %@\n", title, description, viewCount];
}
} else {
[output appendString:@"Channel not found."];
}
self.output.text = output;
} else {
[self showAlert:@"Error" message:error.localizedDescription];
}
}
// Helper for showing an alert
- (void)showAlert:(NSString *)title message:(NSString *)message {
UIAlertController *alert =
[UIAlertController alertControllerWithTitle:title
message:message
preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *ok =
[UIAlertAction actionWithTitle:@"OK"
style:UIAlertActionStyleDefault
handler:^(UIAlertAction * action)
{
[alert dismissViewControllerAnimated:YES completion:nil];
}];
[alert addAction:ok];
[self presentViewController:alert animated:YES completion:nil];
}
@end
Step 4: Run the sample
Switch to the QuickstartApp scheme by clicking
Product > Scheme > QuickstartApp and run the sample (Cmd+R) using the
device simulator or a configured device. The first time you run the sample, it
will prompt you to log in to your Google account and authorize access.
It worked!
Great! Check out the further reading section below to learn more.
I got an error
Bummer.
Thanks for letting us know and we'll work to fix this quickstart.
Authorization information is stored in your Keychain, so subsequent executions
will not prompt for authorization.
Further reading
Google Developers Console help documentation
Google APIs Client for iOS documentation YouTube Data API reference documentation
... <看更多>
human interface guidelines中文 在 [問題] 有沒有Interface Guidelines中文PDF版本- 看板MacDev - 批踢 ... 的八卦
對岸有很多iOS8翻譯版本
https://isux.tencent.com/ios8-human-interface-guidelines.html
https://www.weste.net/2014/10-02/99308.html
不過我希望有PDF更方便觀看
另外我真的目前需要看中文(再搭配英文對照)
若有的朋友在麻煩提供
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.15.118.157
※ 文章網址: https://www.ptt.cc/bbs/MacDev/M.1428979779.A.4B6.html
... <看更多>